package和package(package.json中有多个入口文件可该咋办)
package.json 文件大家都很熟,但是你留意到 main、module、browser 相关的配置了吗?今天就与大家一起聊聊三者的区别以及它们之间的优先级。
一、main、module 和 bowsermain:定义了 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 包有以下目录结构:
---- src
index.js
index.mjs
index.browser.js
index.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
,
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com