package.json的“浏览器”字段没用吗？

Question

最近搜索了一些关于前端项目管理的内容，感到很困惑。
我注意到package.json中有一个字段“浏览器”，但我不知道它起什么作用。
在我看来，我们使用像 Rollup 这样的包打包工具来为浏览器构建 .esm.js，在浏览器中，只需通过

<script>

标签导入 .esm.js 文件即可，我们无法导入任何 npm 包浏览器。所以，我认为“浏览器”字段是没有用的。
例如：
项目结构：

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")

问：在浏览器中，如何导入packageA？谁会关注“浏览器”字段并将“./dist/main.esm.js”返回给我们？

非常感谢。

Answer 1

也许您想阅读

browser

的规格 package.json 的字段。 Npm 不会直接选择特定于平台的文件，而是向 bundler（例如 webpack 或 rollup）提供一个 提示，告知要使用哪些文件，具体取决于它是针对浏览器还是针对其他东西（例如：用于 Node.js）。

这样，可以在 node 和 browser 平台之间使用相同的代码。当节点需要文件时，将使用默认的特定于节点的文件，但是当捆绑器将其捆绑时，将使用（替换）特定于浏览器的文件。

-- 这几乎没什么用！ --

规范中的示例：

备用主要 - 基本

"browser": "./browser/specific/main.js"

替换特定文件 - 高级

"browser": {
    "module-a": "./shims/module-a.js",
    "./server/only.js": "./shims/client-only.js"
}

Answer 2

要添加@Wvck的答案，浏览器设置的另一个典型设置是这样的，因为

fs

模块是一个nodejs模块。然后捆绑器不会将

fs

模块打包到客户端代码中。

"browser": {
    "fs": false
  }