【无标题】

mainFields

有一些第三方模块会针对不同环境提供几份代码。例如分别提供采用ES5和 ES6的2份代码，这2份代码的位置写在package.json文件里：

{
“jsnext: main”: “es/index.js”, //采用ES6语法的代码入口文件
“main”: “lib/index.js”//采用ES5语法的代码入口文件
}
webpack会按照数组里的顺序去package.json文件里面找，只会使用找到的第一个。即那么webpack会根据mainFields数组里的顺序，逐步找到文件。

假如我们想要ES6的那份代码，可以这样进行配置：

mainFields: [‘jsnext:main’, ‘browser’, ‘main’]
main : 定义了 npm 包的入口文件，browser环境和 node环境均可使用
module : 定义 npm 包的 ESM规范的入口文件，browser环境和 node环境均可使用
browser : 定义 npm 包在 browser环境下的入口文件
字段 描述 文件格式
main nodejs 默认文件入口, 支持最广泛 cjs
jsnext:main 社区约定的 esm 文件入口, webpack, rollup 均支持该字段 esm
module esm 官方约定入口, 支持插件较少,故推荐和 jsnext:main 同时使用 esm