如何准备lib与摇树兼容？

Question

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

Answer 1

摇树是捆绑程序用来删除lib的未使用代码的过程。

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

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

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