如何构建一个零依赖、支持 Tree-shaking 的现代 JavaScript 库？-js教程-PHP中文网

如何构建一个零依赖、支持 Tree-shaking 的现代 JavaScript 库？

幻影之瞳

发布： 2025-09-27 15:42:01

原创

399人浏览过

答案是使用ES模块语法、正确配置package.json的module和exports字段、声明sideEffects并选择Rollup等工具输出多格式。具体做法包括：源码用export/import分离功能，通过exports定义导入规则，设sideEffects为false以支持tree-shaking，最终实现零依赖、可摇除未用代码的现代JS库。

如何构建一个零依赖、支持 tree-shaking 的现代 javascript 库？

构建一个零依赖、支持 Tree-shaking 的现代 JavaScript 库，关键在于使用 ES 模块语法、避免副作用，并通过合理的构建配置输出标准格式。以下是具体实现方式。

使用 ES 模组（ES Modules）导出功能

Tree-shaking 能生效的前提是代码使用 import / export 语法。确保你的源码采用 ES 模块规范，每个功能独立导出。

例如：

// src/math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
<p>// src/index.js
export { add } from './math';
export { subtract } from './math';

登录后复制

这样打包工具能静态分析模块依赖，移除未被引用的导出。

在 package.json 中正确设置入口字段

告诉打包工具你的“纯净”ES 模块入口，避免引入包含全部功能的 bundle。

立即学习“Java免费学习笔记（深入）”；

关键字段包括：

module：指向 ES 模块版本（如 dist/your-lib.esm.js）
exports（推荐）：定义更精细的导入路径和条件导出

示例：

{
  "main": "dist/your-lib.cjs.js",
  "module": "dist/your-lib.esm.js",
  "exports": {
    ".": {
      "import": "./dist/your-lib.esm.js",
      "require": "./dist/your-lib.cjs.js"
    }
  },
  "files": ["dist"]
}

登录后复制

使用 exports 可提升封装性，防止用户直接导入内部文件绕过 Tree-shaking。

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

避免或标记副作用

如果库中没有副作用（比如不修改全局环境、不执行立即调用函数），Tree-shaking 效果最佳。

若有少量副作用，可在 package.json 中明确声明：

{
  "sideEffects": false
}

登录后复制

表示整个包无副作用，可安全摇除未使用代码。若某些文件有副作用（如 polyfill），列出它们：

"sideEffects": [
  "./polyfill.js"
]

登录后复制

选择轻量构建工具进行打包

即使追求零依赖，发布时通常仍需构建输出不同格式。推荐使用 Rollup 或 esbuild，配置简单且对 Tree-shaking 支持好。

Rollup 基础配置示例（rollup.config.js）：

export default {
  input: 'src/index.js',
  output: [
    {
      format: 'es',
      file: 'dist/mylib.esm.js'
    },
    {
      format: 'cjs',
      file: 'dist/mylib.cjs.js'
    }
  ]
};

登录后复制

输出 ESM 格式供现代项目使用，同时兼容旧版 Node 环境。

基本上就这些。保持模块化、用 ES 模块语法、正确配置 package.json 并声明副作用，就能打造一个真正支持 Tree-shaking 且无外部依赖的 JS 库。

以上就是如何构建一个零依赖、支持 Tree-shaking 的现代 JavaScript 库？的详细内容，更多请关注php中文网其它相关文章！