How prepare lib to be tree-shaking compatible?

Question

I have a plugin created with Typescript and I need activate Tree-shaking in this plugin. Is there any way to enable this feature without webpack?

Answer 1

Tree shaking is a process that bundlers apply in order to remove lib's unused code.

That means that as a lib you need to export a version (esm) that is tree-shakable, because you don't know what code your consumers will not use.

If your code gonna be used in both envs, node & browsers, you will need to export cjs (commonJS) version for node & esm (ES modules) version for browser use.

With typescript you can achieve that by running tsc twice with 2 separate configs:

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

}

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

}

Then specify the config for each run.

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

In your package.json add 2 entries.

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