零依赖库构建指南：支持Tree-shaking的现代JS实践

想打造一个极致轻量、可被现代打包工具智能剔除未使用代码的JavaScript库？本文手把手教你构建零依赖且原生支持Tree-shaking的现代JS库：从强制采用静态ES模块语法、精准配置package.json的module/exports/sideEffects字段，到用Rollup或esbuild输出双格式产物，全程杜绝动态导入与第三方依赖——最终产出的不仅是无运行时包袱的纯净代码，更是真正拥抱ES生态、开箱即用的高质量开源组件。

构建一个零依赖且支持 Tree-shaking 的现代 JavaScript 库，关键在于使用原生 ES 模块语法、避免副作用，并通过合理的打包配置输出符合标准的模块格式。以下是如何一步步实现这一目标。

使用 ES 模块语法（ESM）

Tree-shaking 依赖于静态的 import 和 export 语法，因此你的源码必须使用 ES 模块格式。

• export const myFunction = () => { ... }
• export class MyComponent { ... }
• export default something（谨慎使用默认导出，可能影响摇树）

避免动态导入或 require，它们会破坏静态分析。

在 package.json 中正确声明模块入口

为了使工具能识别你的 ESM 模块并进行 Tree-shaking，需在 package.json 中设置字段：

• "module": 指向 ES 模块版本（如 dist/mylib.esm.js）
• "main": 指向 CommonJS 版本（如 dist/mylib.cjs.js）
• "exports"（推荐）: 提供更精确的入口控制，例如：

使用 exports 能更好地区分引入方式，帮助 bundler 正确选择模块类型。

标记 sideEffects: false

Webpack、Rollup 等打包工具通过 sideEffects 字段判断是否可以安全地移除未引用的代码。

• 如果你的库没有副作用（如不修改原型、不执行全局逻辑），在 package.json 中添加：
• "sideEffects": false

如果有个别文件有副作用（如 polyfill），可将其路径列在数组中，其余仍可被摇树。

使用 Rollup 或 esbuild 进行打包

选择支持 Tree-shaking 的打包工具是关键。Rollup 原生为库设计，esbuild 更快，两者都适合。

• 输入：src/index.js
• 输出格式：'es'（生成 ESM）、'cjs'（生成 CommonJS）
• 不引入外部依赖（external 配置排除 peerDependencies）
• 使用 @rollup/plugin-node-resolve 和 @rollup/plugin-commonjs（如有必要）

最终产出干净的、无运行时依赖的代码。

避免引入第三方依赖

“零依赖”意味着不依赖任何 external npm 包（peerDependencies 除外）。

• 用原生 API 替代工具函数（如用 Object.keys() 代替 lodash.keys）
• 若必须功能增强，考虑将小工具内联到项目中
• 检查 bundle 大小和依赖图（可用 rollup-plugin-visualizer）

发布前运行 npm ls 确保 dependencies 为空。

基本上就这些。只要坚持 ESM、声明 module、标记 sideEffects 并使用合适的打包工具，你就能发布一个轻量、可摇树、无依赖的现代 JS 库。不复杂但容易忽略细节。

到这里，我们也就讲完了《零依赖库构建指南：支持Tree-shaking的现代JS实践》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！