如何编写同时用于 node 和浏览器的 javascript 包-mile米乐体育
我多次看到大家在这个问题上产生困惑，甚至经验丰富的 javascript 开发者都可能错过它的一些微妙之处。所以我认为应该写这么一个简短的教程。
假设有一个 javascript 模块想发布在 npm 中，它既能在 node 中运行，又能在浏览器中运行。这会产生一个问题！这个特定的模块对于 node 和浏览器的运行，会有一点不同的实现。
这种情况相当常见，因为这 node 和浏览器之间存在许多微小的环境差异。如何正确实现相当棘手，尤其是想在针对浏览的实现中极尽可能地减少依赖库的时候。
构建一个 js 包
来写一个很小的，称为 base64-encode-string 的 javascript 包。它的作用是将输入的字符串以 base64 编码之后输出。
对浏览器来说，使用内置的 btoa 函数很容易就能实现：
module.exports = function (string) { return btoa(string); }; 但 node 中没有 btoa 函数，所以我们要创建一个 buffer，然后调用 buffer.tostring()：
module.exports = function (string) { return buffer.from(string, 'binary').tostring('base64'); }; 两种方法都能输出正确的 base64 编码，比如：
var b64encode = require('base64-encode-string'); b64encode('foo'); // zm9v b64encode('foobar'); // zm9vymfy 现在我们需要一些方法来检验它是运行在浏览器中还是运行在 node 中，然后我们才能调用正确的版本。browserify 和 webpack 都定义了 process.browser，在浏览器中它返回 true，而在 node 中它返回 false。所以我们很容易做到：
if (process.browser) { module.exports = function (string) { return btoa(string); }; } else { module.exports = function (string) { return buffer.from(string, 'binary').tostring('base64'); }; } 我们把文件命名为 index.js，键入 npm publish，然后一切都搞定了。但这种方法存在一个巨大的性能问题。
index.js 中包含了对 node 内建的 process 和 buffer 的引用，browserify 和 webpack 都会在打包的时候自动包含相应的 polyfill(引1，引2)。
虽然这个模块只有 9 行，但 browserify 和 webpack 最小化并打包出来有 24.7kb(7.6kb min gz)。在浏览器中只需要 btoa 就能解决的问题居然需要引用这么大的东西！
超爱“browser” 选项
如果在 browserify 和 webpack 的文件中寻找解决办法，最终会找到 node-browser-resolve。这涉及到package.json 中的 “browser” 选项。它定义在为浏览器构建模块时的行为。
使用这个技术，需要在 package.json 中添加：
{ /* ... */ "browser": { "./index.js": "./browser.js" } } 然后将两个函数分拆到 index.js 和 browser.js 两个文件中：
// index.js module.exports = function (string) { return buffer.from(string, 'binary').tostring('base64'); }; // browser.js module.exports = function (string) { return btoa(string); }; 这之后，browserify 和 webpack 会产生更合适的结果：browserify 最小只有 511 字段(315 min gz)，webpack 则是 550 字节(297 min gz)。
这个包发布到 npm 之后，在 node 中 运行 require(‘base64-encode-string’) 都是引用 node 版本，而使用 browerify 或 webpack 则会引用浏览器版本。成功！
对于 rollup 来说会更复杂一点。rollup 用户需要使用 rollup-plugin-node-resolve 并在选项中设置 browser 为 ture。
对于 jspm 来说就很不幸了，它不支持 “browser” 选项。不过 jspm 用户可以通过如下方法绕过去：require(‘base64-encode-string/browser’) 或者 jspm install npm:base64-encode-string -o “{main:’browser.js’}”。另外，包作者可以在 package.json 中指定“jspm”选项。
高级技巧
直接使用“browser”的方法很好，但对于大型项目来说，package.json 和代码的耦合就很尴尬了。例如，package.json 很快会变成下面这个样子：
{ /* ... */ "browser": { "./index.js": "./browser.js", "./widget.js": "./widget-browser.js", "./doodad.js": "./doodad-browser.js", /* etc. */ } } 你每需要一个浏览器模块，就必须创建两个单独的文件，然后在 “browser” 选项中添加一行来关联它们。还得小心不要写错什么！
而且你会发现自己需要将部分代码提取为单独的模块，因为你不想使用 if (process.browser) {} 来进行检查。当这些 *-browser.js 文件逐渐积累起来，就会使代码导航越来越困难。
解决这个问题有几个不同的mile米乐体育的解决方案。我个人喜欢使用 rollup 来作为构建工具，它会自动将一个代码库中的代码拆分成 index.js 和 browser.js 文件，节约空间和时间。
想这样做需要安装 rollup 和 rollup-plugin-replace，然后定义 rollup.cofnig.js 文件：
import replace from 'rollup-plugin-replace'; export default { entry: 'src/index.js', format: 'cjs', plugins: [ replace({ 'process.browser': !!process.env.browser }) ] }; （我们会使用 process.env.browser 来切换针对浏览器的构建和针对 node 的构建。)
接下来，创建 src/index.js 文件，它包含一个单独的函数，其中用到了 process.browser 条件：
export default function base64encode(string) { if (process.browser) { return btoa(string); } else { return buffer.from(string, 'binary').tostring('base64'); } } 然后在 package.json 中添加 prepublish 步骤，用于生成文件：
{ /* ... */ "scripts": { "prepublish": "rollup -c > index.js && browser=true rollup -c > browser.js" } } 生成的文件相当简单而且易读：
// index.js 'use strict'; function base64encode(string) { { return buffer.from(string, 'binary').tostring('base64'); } } module.exports = base64encode; // browser.js 'use strict'; function base64encode(string) { { return btoa(string); } } module.exports = base64encode; 你会发现 rollup 根据需要自动将 process.browser 转变为 true 或 false，然后去掉无用的代码。因此在针对浏览器的生成结果中不会引用 process 或 buffer。
这种技术让你可以在代码中任意使用 process.browser 条件，发布出来的结果总是两个小文件，一个 index.js，一个 browser.js。在 node 环境只有 node 相关的代码，而在浏览器环境则只有浏览器相关的代码。
你还可以配置 roolup 生成 es 模块构建、iife 构建，或 umd 构建。比如我的 marky 项目就是一个拥有多个 rollup 构建目标的简单库。
本文描述的项目(base64-encode-string) 已经发布到 npm 了，你可以去深入了解它。源代码在 github 上。