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

Question

我有一个用 Typescript 创建的插件，我需要在这个插件中激活 Tree-shaking 。有没有办法在没有 webpack 的情况下启用此功能？

Answer 1

摇树是捆绑器应用的一个过程，目的是删除 lib 未使用的代码。

这意味着作为一个库，你需要导出一个可摇树的版本（esm），因为你不知道你的消费者不会使用什么代码。

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

使用打字稿，您可以通过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"
  ...
}