\“模块 vs 主要：现代英雄 vs package.json 的复古传奇！\”

什么是模块字段？

package.json 中的 module 字段指定 ESM（ES6 模块） 的入口点。与为 CommonJS 模块 (require()) 设计的 main 字段不同，模块用于支持较新的 ESM 标准的目标环境，例如 JavaScript 捆绑器（Webpack、Rollup）和使用导入语法的浏览器。

为什么模块很重要？

模块字段的出现是因为像 Webpack 和 Rollup 这样的 JavaScript 打包器想要优化使用 ESM 格式的包。 ESM 具有 tree-shaking（删除未使用的代码）和 静态分析（更有效地分析依赖关系）等优点。 module 字段告诉捆绑程序包的 ESM 版本所在的位置，允许他们执行这些优化。

它与 main 有何不同：

• Main 用于 Node.js 与 require() 一起使用的 CommonJS（旧格式）。
• 模块 适用于支持导入语法的捆绑器和环境使用的 ESM（现代格式）。

例子：

如果您要运送同时支持 CommonJS 和 ESM 的软件包，则可以同时使用 main 和 module：

{
  "name": "my-package",
  "version": "1.0.0",
  "main": "index.js",  // Entry for CommonJS (Node.js)
  "module": "esm/index.js"  // Entry for ESM (Bundlers, Modern Environments)
}

什么时候使用模块？

• 捆绑器：当 Webpack、Rollup 或 Parcel 等工具捆绑您的代码时，它们会查找模块字段以使用包的 ESM 版本，这可以比 CommonJS 更好地优化。
• 现代环境：支持本机导入语法的浏览器和其他环境也可能引用 module 字段。

为什么不直接使用 main 呢？

• Main 用于与 Node.js 和 CommonJS 系统向后兼容。 Node.js 不使用 module 字段；它依赖于 main 来 require().
• 模块 专门用于现代 ESM 系统，它是捆绑程序寻找优化导入的东西。

细分示例：

{
  "main": "index.js",   // Entry point for CommonJS, Node.js uses this
  "module": "esm/index.js"  // Entry point for ES modules, bundlers use this
}

• 如果有人使用 require('my-package')，Node.js 将加载 index.js (CommonJS)。
• 如果有人使用 import 'my-package'，捆绑器将查看 esm/index.js (ESM)。

重要注意事项：

• Node.js 本身并不使用 module 字段（它仅使用 main 来向后兼容）。
• JavaScript 打包程序更喜欢 module，因为它指向包的 ES 模块版本。

概括：

• 使用 main 来 Node.js (CommonJS)。
• 将模块用于现代 JavaScript 环境 (ESM) 和捆绑器。
• 如果您想同时支持两者，请在 package.json 中包含这两个字段。

这是否有助于消除您对模块字段的困惑？

以上是\“模块 vs 主要：现代英雄 vs package.json 的复古传奇！\”的详细内容。更多信息请关注PHP中文网其他相关文章！