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

构建零依赖且支持Tree-shaking的现代JavaScript库，核心是要遵循ES模块规范，同时选择支持Tree-shaking的构建工具，避免引入不必要的第三方依赖，让使用者在打包时能自动剔除未使用的代码。

项目基础配置

首先初始化项目，创建项目目录后执行npm初始化命令，生成package.json文件，需要重点配置几个关键字段：

{
  "name": "zero-dep-utils",
  "version": "1.0.0",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "files": ["dist"],
  "sideEffects": false,
  "scripts": {
    "build": "rollup -c"
  }
}

其中sideEffects字段设置为false，是告知打包工具该库没有副作用代码，可以放心进行Tree-shaking；module字段指定ES模块入口，供支持ES模块的项目使用；main字段指定CommonJS入口，兼容旧环境。

编写符合规范的库代码

库代码需要全部使用ES模块语法导出，避免混合CommonJS导出，同时不要引入任何第三方依赖，保证零依赖特性。以下是一个工具函数的示例：

// src/array.js
export const uniqueArray = (arr) => {
  return [...new Set(arr)];
};

// src/string.js
export const capitalize = (str) => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

// src/index.js 统一导出
export { uniqueArray } from './array.js';
export { capitalize } from './string.js';

注意不要在代码中添加副作用逻辑，比如直接在模块顶层执行DOM操作、修改全局变量等，这类代码会被标记为有副作用，无法被Tree-shaking剔除。

配置Rollup构建工具

Rollup天然支持ES模块的Tree-shaking，是构建此类库的首选工具。首先安装Rollup和相关插件：

npm install rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve --save-dev

然后创建rollup.config.js配置文件：

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/index.esm.js',
      format: 'esm',
      sourcemap: true
    },
    {
      file: 'dist/index.cjs.js',
      format: 'cjs',
      sourcemap: true
    }
  ],
  plugins: [
    resolve(),
    commonjs()
  ]
};

该配置会同时输出ES模块和CommonJS两种格式的文件，满足不同使用场景的需求，同时Rollup会自动剔除未使用的导出代码。

验证Tree-shaking效果

构建完成后可以通过以下方式验证Tree-shaking是否生效：

• 查看构建后的ES模块文件，如果使用者只导入了uniqueArray，那么capitalize相关的代码应该不会出现在最终打包产物中
• 可以使用打包分析工具，比如webpack-bundle-analyzer，查看引入库后的打包体积，确认未使用的代码没有被打包进去

另外可以在测试项目中模拟使用场景，只导入部分函数后打包，对比完整导入和按需导入的体积差异，验证Tree-shaking的实际效果。

发布前的注意事项

发布到npm之前，需要确认以下几点：

• package.json的files字段只包含dist目录，避免把源码、配置文件等不必要的文件发布出去
• 确保没有在代码中引入任何第三方依赖，检查package.json的dependencies字段为空
• 可以添加README说明库的使用方式、零依赖特性和Tree-shaking支持情况，方便使用者了解

完成以上步骤后，执行npm publish就可以将构建好的零依赖、支持Tree-shaking的JavaScript库发布出去，供其他开发者使用。

JavaScriptTree-shaking零依赖rollupES_module修改时间：2026-07-12 09:42:19