npm 包入口与对应文件类型

npm 包划分

• 只允许在 web 端使用的
• 只允许在 server 端使用的（包含 webpack，rollup 等工具）
• web 端/server 端都可以使用

IIFE,CJS,ESM,UMD

文件类型	包入口字段	使用场景
iife	jsdelivr unpkg	web 使用，供 CDN 选择路径，添加全局变量到浏览器中
cjs	main	node 环境使用，使用 require('module')，默认入口
esm	module	node/web 环境均可，都需设置 type 为 module
umd	browser	web 使用，该字段亦会被 webpack 调用

webpack 的mainFields字段默认值: ["browser", "module", "main"]，browser 会被 cdn 加载，故 browser 最好使用 umd 格式

使用 exports 条件导出

推荐使用 exports 代替 main，这样只能引入exports指定的文件，如 import "pkg/other_file.js" 没有配置在exports中，就无法被引入

{
  "main": "./index.js", // 兼容不支持 exports 的 node
  "exports": {
    "require": "./lib/index.cjs.js",
    "import": "./lib/index.esm.js",
    "default": "./lib/index.esm.js"
  }
}

总结

• 最好使用 exports 条件导出
• 如导出的是 ESM 规范的包，使用 module
• 如只在 web 端使用，并且严禁在 server 端使用，使用 unpkg 或 jsdelivr
• 如只在 server 端使用，使用 module，main
• 如在 web 端和 server 端都允许使用，使用 unpkg，jsdelivr，module 和 main

实践

完全使用 esm，如有不同环境需求，通过 rollup 打包成支持其他目标环境的格式 esm 给打包器使用，iife 给浏览器，cjs 给 node

参考链接

cjs, umd, esm or iife?
package.json 中的 browser，module，main 字段优先级探索
在 Nodejs 或浏览器运行 ESM 代码
nodejs 官方文档 package 包
vue3