如何准备 lib 以兼容 tree-shaking？

Question

我有一个用 Typescript 创建的插件，我需要在 this plugin 中激活 Tree-shaking。 没有webpack有什么方法可以启用这个功能吗？

Answer 1

Tree shaking 是打包程序应用的一个过程，目的是删除 lib 的未使用代码。

这意味着作为一个库，您需要导出一个可摇树优化的版本 (esm)，因为您不知道您的消费者不会使用哪些代码。

如果您的代码将在 envs、节点和浏览器中使用，您将需要为节点导出 cjs（commonJS）版本和为浏览器使用的 esm（ES 模块）版本。

使用打字稿，您可以通过 运行ning tsc 两次使用 2 个单独的配置来实现：

// tsconfig.browser.json
{
  "compilerOptions": {
    "module": "esnext",
    "outDir": "./dist/esm/",
    ...
  }

}

// tsconfig.node.json
{
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "./dist/cjs/",
    ...
  }

}

然后为每个运行指定配置。

tsc -c ./tsconfig.browser.json
tsc -c ./tsconfig.node.json

在您的 package.json 中添加 2 个条目。

{
  ...
  module: "dist/esm/index.js",
  main: "dist/cjs/index.js"
  ...
}