package.json中的browser字段是否毫无作用？

我的困惑 #

最近研究前端项目管理时，对package.json里的browser字段产生了疑问：我以为我们会用Rollup这类打包工具生成浏览器可用的.esm.js文件，然后在浏览器里通过<script>标签直接导入，而且浏览器本身没法直接导入npm包，所以觉得browser字段毫无用处。

举个例子：

项目结构 #

packageA---
         |--dist
             |--main.esm.js
             |--main.common.js
         |--main.js
         |--package.json

package.json内容 #

{
   "name": "packageA",
   "main": "./dist/main.common.js",
   "browser": "./dist/main.esm.js"
}

Node环境下的使用 #

// 用Node执行该文件时，会加载"./dist/main.common.js"
const p = require("packageA")

核心问题 #

在浏览器中如何导入packageA？谁会遵循browser字段返回"./dist/main.esm.js"？

解答 #

1. 谁会遵循browser字段？ #

browser字段不是给原生浏览器直接识别的，而是给前端打包工具、浏览器端模块加载器用的，典型场景包括：

• Webpack/Rollup/Parcel这类现代打包工具：当你在项目代码里写import 'packageA'时，这些工具会优先读取browser字段指定的文件，而非main字段的Node环境版本。这是因为很多npm包针对Node和浏览器有不同实现（比如Node依赖fs等内置模块，浏览器里需要用Web API替代），browser字段就是用来明确浏览器环境下的入口文件。
• Browserify这类传统浏览器打包工具：早期专门用来把CommonJS模块转成浏览器可用代码的工具，完全遵循browser字段的约定。
• 模块加载垫片工具：能让浏览器支持直接导入npm包的垫片，会读取package.json的browser字段来加载对应的浏览器适配版本。

2. 浏览器中导入packageA的几种方式 #

方式一：通过打包工具构建（最常用）

在你的应用项目中安装packageA，然后在代码中写：

import packageA from 'packageA'

打包工具（比如Webpack/Rollup）会自动识别browser字段，加载./dist/main.esm.js，并把它打包进你的应用最终的bundle文件里。最后在浏览器中用<script>标签引入这个bundle即可。

方式二：CDN + ES模块

部分支持ES模块的CDN会识别package.json的browser字段，你可以直接在浏览器中通过<script type="module">标签导入该包的浏览器适配版本，无需手动指定具体的文件路径。

方式三：用模块加载垫片适配

使用浏览器模块加载垫片工具，配置好模块映射规则后，就可以在浏览器中直接写import packageA from 'packageA'，垫片会自动读取package.json的browser字段，加载对应的main.esm.js文件。

内容的提问来源于stack exchange，提问作者JasonZhang