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

Question

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

Answer 1

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

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

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

使用 typescript ，您可以通过使用 2 个单独的配置运行 tsc 两次来实现:

// 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"
  ...
}