main vs browser vs jsnext:main vs module

2,998 阅读1分钟

这是几个在 JavaScript 模块系统中比较混乱的几个概念:

- `main` 用来指向 commonjs 格式的入口文件

- `browser` 在 require 逻辑中优先使用 `pkg.browser` 这个参数

例如:

{
  "main": "lib/index.js",
  "browser": "lib/browser.js"
}

在 bundler 针对不同环境(node 或 browser)编译的时候会有不同的优先级,`browser` 也可以只是替换部分 `require` 的模块:

{
  "main": "lib/index.js",
  "browser": {
    "lib/http.js": "lib/http-browser.js"
  }
}

正如这里只是替换了 `lib/http.js` 模块。

- `module` & `jsnext:main`

这两个其实是一个东西,都是 ES modules 格式的入口文件,jsnext:main 已经被 module 取代

值得一提的是 `jsnext:main` 被 `module` 取代的部分原因是前者具有误导性,一眼看上去会让你以为你可以不编译代码让用户自己编译你用到的 ES6/7 特性。然而并不是这样的,你应该发布编译后的代码但是保留 `export/import` 关键词交给 bundler 处理。

---

Reference:

- jsnext:main – should we use it, and what for? · Issue #5 · jsforum/jsforum

- rollup/rollup-plugin-node-resolve

- Add ES Modules build by gaearon · Pull Request #1369 · reactjs/redux