如何准備 lib 與 tree-shaking 兼容？

Question

我有一個用 Typescript 創建的插件，我需要在這個插件中激活 Tree-shaking。 有沒有辦法在沒有 webpack 的情況下啟用此功能？

Answer 1

Tree Shaking 是捆綁程序為了刪除 lib 未使用的代碼而應用的過程。

這意味着作為一個庫，您需要導出一個可搖樹的版本（esm），因為您不知道您的消費者不會使用哪些代碼。

如果您的代碼將同時用於環境、節點和瀏覽器，您需要為節點和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"
  ...
}