答案是使用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.jsexport const add = (a, b) => a + b;export const subtract = (a, b) => a - b;// src/index.jsexport { 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 库。
以上就是如何构建一个零依赖、支持 Tree-shaking 的现代 JavaScript 库？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523820.html
微信扫一扫 
支付宝扫一扫 
