package和packagepackage.json中有多个入口文件可该咋办

导读package.json文件大家都很熟，但是你留意到main、module、browser相关的配置了吗？今天就与大家一起聊聊三者的区别以及它们之间的优先级....

package.json 文件大家都很熟，但是你留意到 main、module、browser 相关的配置了吗？今天就与大家一起聊聊三者的区别以及它们之间的优先级。

一、main、module 和 bowser

main：定义了 npm 包的入口文件，browser 环境和 node 环境均可使用。

module：定义 npm 包的 ESM 规范入口文件，browser 环境和 node 环境均可使用。

browser：定义 npm 包在 browser 环境下的入口文件。

三者都是定义包的入口文件，有一个 main 不够吗？为什么还要再出现 module 和 browser ?

二、为何出现多个入口关键字？

npm 包最早都是基于 commonJS 规范的，使用 main 作为主入口，当 require("some-module") 的时候，就会根据 main 字段去查找入口文件。但在 ES6 之后，js 拥有了 ES Module ，简称 ESM ，全称是ECMA Script Module，是 js 官方的标准化模块系统，所有的主流浏览器和 node 环境均支持。

如果使用 ESM 模块规范也使用 main 字段，就会造成一定的困扰，所以 rollup 使用了另一个字段 module 。

module 告诉它是一个模块<script type="module" src="./js/a.js"></script>

package.json 文件中

{ module:"es/index.js"}module 设置 ES6 编译入口文件

模块规范 CommonJS 与 ESM 导出引入是有区别的，对模块规范不熟悉的同学，可自行学习。

如果我们需要开发一个 npm 包，同时兼容 Web 端和 Server 端，需要在不同环境下加载 npm 包的不同入口文件，所以就衍生出来 module 和 browser 字段。

三、优先级

假定 npm 包有以下目录结构：

---- srcindex.jsindex.mjsindex.browser.jsindex.browser.mjs

为了能在 node 环境下原生执行 ESM 规范脚本文件，所以出现 .mjs 文件，当 index.mjs 和 index.js 同时存在时会优先加载 .mjs 文件。

.js 文件是使用 commonJS 规范的语法，使用 require(xxx) 引入

.mjs 文件是使用 ESM 规范的语法，使用 import xxx

其中 package.json 文件：

{ "main":" src/index.js", "module": "src/index.mjs", // browser 可以定义成和 main / module 字段一一对应的映射对象， "browser": { "./src/index.js": "./src/index.browser.js", "./src/index.mjs": "./src/index.browser.mjs" } // 也可以直接定义为字符串 // "browser": "./src/index.browser.js" // "browser": "./src/index.browser.mjs"}

根据上述配置，指定的入口可能有五种情况：

• main
• module
• browser
• browser commonJS
• browser ESM

它们之间的优先级为：

browser = browser ESM > module > browser commonJS > main