package.json的main，module，浏览器属性应该指向min还是source？

Question

对于以类似...的结构发布的JS库

my-package\
  dist\
    my-package.cjs.js
    my-package.cjs.min.js
    my-package.cjs.min.js.map
    my-package.esm.js
    my-package.esm.min.js
    my-package.esm.min.js.map
    my-package.umd.js
    my-package.umd.min.js
    my-package.umd.min.js.map
  package.json

例如，构建于CJS，ESM和UMD捆绑包中，每个捆绑包都有一个“源”，缩小文件和映射文件。

package.json

{ // ...
  "main": "dist/my-package.cjs.js",
  "module": "dist/my-package.esm.js",
  "browser": "dist/my-package.umd.js"
}

我的假设是这些属性应指向“源”文件，并且如果构建是非调试/非开发模式，则用于将我的库（例如Webpack）捆绑到外部项目中的工具足够聪明，可以选择缩小的文件。

还是我错了，这些属性应该指向缩小的文件？

Answer 1

我想你是对的。例如，如果您仅发布 ESM 和 UMD，那么您可以坚持使用

{ // ...
  "main": "dist/my-package.umd.js",
  "module": "dist/my-package.esm.js"
}

最重要的是，使用“ module ”，您可以提供可以由通过 Webpack 或 Rollup 编译的应用程序有效使用的捆绑包版本。在这种情况下可以应用 Tree Shaking，因此所有死代码都不会包含在最终包中。

例如，这对于 React 组件库很有用。您可以通过这种方式导出它，以便使用它的应用程序只能获取正在使用的组件的代码。

之前已经在这里回答过这个问题：

package.json 中的“module”字段有什么用？