typescript - Hur förbereder man ett bibliotek för att vara kompatibelt med tree-shaking?

Jag har ett plugin skapat med Typescript och jag behöver aktivera Tree-shaking i detta plugin. Finns det något sätt att aktivera denna funktion utan webpack?

Svar #1

Tree shaking är en process som bundlers använder för att ta bort bibliotekets oanvända kod.

Det betyder att som ett bibliotek behöver du exportera en version (esm) som är tree-shakable, eftersom du inte vet vilken kod dina användare inte kommer att använda.

Om din kod ska användas i båda miljöerna, node och webbläsare, behöver du exportera cjs (commonJS) version för node och esm (ES-moduler) version för webbläsaranvändning.

Med TypeScript kan du uppnå det genom att köra tsc två gånger med 2 separata konfigurationer:

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

}

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

}

Ange sedan konfigurationen för varje körning.

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

I din package.json lägg till 2 poster.

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