package.json 中 browser 字段规范
package.json 中 browser 字段规范
browser 字段由包作者提供，作为在打包模块供客户端使用时向 javascript 打包器或组件工具提供的提示。
当 javascript 模块准备在客户端上使用时，有两个主要问题：
- 客户端已经提供了某些功能，某些功能不可用。
- 客户端提供的功能可以包括 http 请求、websockets、dom 操作。不可用的功能包括 tcp socket、系统磁盘IO。
browser 字段是包作者可以向打包器提示打包时需要替换哪些元素（其他模块或源文件）的地方。
规范
替换 main 字段
当我们为 browser 字段指定单个字符串时，它将替换 main 字段并成为模块入口点。main 字段用于指定模块的入口点，因此通过替换它，在使用 js 打包器打包用于浏览器端的文件时，打包器就会使用 browser 字段作为模块入口文件。
"browser": "./browser/specific/main.js"
当另一个模块通过 import 导入这个包时，打包器会加载 browser 字段中指定的文件（也就是 ./browser/specific/main.js），而不是加载 main 字段中指定的文件。
browser 字段中指定的模块入口都是相对于 package.json 的位置（packge.json 通常都位于根目录下）。
替换特定的文件
在许多情况下，有大量的代码都适用于客户端和服务器端。只需指定一个对象和一个字符串，就可以更容易替换一些文件，而不是创建一个全新的入口点。
使用对象时。左侧（key）是要被替换的模块或文件的名称，右侧（value）是替换模块或文件的名称。
"browser": {"module-a": "./shims/module-a.js","./server/only.js": "./shims/client-only.js"
}
现在，当我们在打包代码时，module-a 的导入将被替换为来自 ./shims/module-a.js 文件以及 ./server/only.js，它将被替换为 ./shims/client-only.js。
如果我们所依赖的模块已经包含浏览器字段，那么就不必做任何特殊的事情。无论何时需要该模块，打包器都应该使用该模块提供的提示。
忽略模块
我们可以通过为任何键（文件名）指定 false 值来简单地防止模块或文件被加载到包中。如果我们知道某些代码路径不会在客户端执行，但发现拆分或更改代码结构很尴尬，那么这很有用。
"browser": {"module-a": false,"./server/only.js": "./shims/server-only.js"
}
在进行打包后，下面的导入将会返回一个空对象：
var a = require('module-a');
a
// {}
注意：false 的使用应仅限于应用程序代码中其他 browser 字段方法不起作用的最重要的地方。不鼓励使用 false，但有时这是将客户端打包中的模块列入黑名单的必要方法。
优势
使用 package.json 中的 browser 字段，包作者可以清楚地阐明哪些文件不适合客户端使用，并提供替代方案。它允许模块代码（以及随后依赖于模块的代码）在创建客户端绑定包时不使用预处理器、源代码更改或运行时检测来识别哪些代码是合适的。
总结
- 如果我们的模块是纯javascript的，可以在客户端和服务器环境中运行，那么你就不需要 browser 字段。
- browser 字段位于 package.json 文件中，因为它以提示的形式向打包者提供元数据，说明我们所指示的哪些文件是针对客户端的。它可以使得的源代码保持干净，不受攻击。
- 将客户端环境视为特例，因为它将对象暴露到全局空间中以提供某些功能并限制其他功能。