“模块 vs 主要:现代英雄 vs packagejson 的复古传奇!”

“模块 vs 主要:现代英雄 vs packagejson 的复古传奇!”

什么是模块字段?

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 packagejson 的复古传奇!”的详细内容,更多请关注www.sxiaw.com其它相关文章!