我最近搜索了一些关于前端项目管理的内容，结果感到困惑
我注意到有一个字段"浏览器">，但我不知道它扮演了什么角色
在我看来，我们使用Rollup这样的包包工具为浏览器构建.esm.js，而在浏览器中，只需通过<script>标记导入.esm.js文件，我们无法在浏览器中导入任何npm包。所以，我认为field"浏览器"；毫无用处
例如：
项目结构：
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"
}
// this is a js file which use packageA.
// when we use Node to execute this file, will return "./dist/main.common.js".
const p = require("packageA")
Q： 在浏览器中，如何导入软件包A？以及谁将跟随这个领域"；浏览器"；并返回"/dist/main.esm.js"；对我们来说？
非常感谢。
也许您想阅读browser的规范package.json.Npm的字段不会直接选择特定于平台的文件，而是对bundler(如webpack或rollup(的一个提示，提示使用哪些文件，这取决于它是为浏览器绑定还是为其他东西绑定(例如：为Node.js(。
这样，相同的代码可以在节点和浏览器平台之间使用。当节点需要文件时，将使用默认的特定于节点的文件，但当bundler捆绑它时，将改用(替代(特定于浏览器的文件。
--这几乎没有用！——
规范示例：
备用主-基本
"browser": "./browser/specific/main.js"
替换特定文件-高级
"browser": {
"module-a": "./shims/module-a.js",
"./server/only.js": "./shims/client-only.js"
}
添加到@Wvck的答案中，浏览器设置的另一个典型设置是这样的，因为fs模块是nodejs模块。那么bundler就不会将fs模块打包到客户端代码中。
"browser": {
"fs": false
}