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

构建一个零依赖、支持 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;// 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。
避免或标记副作用
如果库中没有副作用(比如不修改全局环境、不执行立即调用函数),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 库。










