when publishing npm package, should I use src of dist

Question

When publishing some javascript to npm as a library, should I set the "main" in pacakge.json to "dist/index.js" or my "src/index.js"?

Suppose that the library is built with webpack, and may be used with projects in webpack.

what will be the difference between two options. will webpack be able to do tree shaking in both options?

Thanks!

Answer 1

If your library is designed to be used in the browser, then it's important to remember that not everyone is using a module bundler.

It's good practice to set the main property to the bundled file (in your case dist/index.js) and make sure that you have a prepublish script that performs your build step before you publish it.

To support tree-shaking with bundlers like Rollup, you can use the module property and ensure that it points to a module that uses ES2015 imports.

For example:

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

Rollup will respect this, but getting Webpack to tree-shake your code is a little more involved.