node.js - 使用 Browserify 加载 polyfill 和 shim 的正确方法是什么

Question

我正在构建一个网络应用程序，并且我开始了解并喜欢 Browserify。不过有一件事困扰着我。

我正在使用一些 ES6 功能，这些功能需要在旧浏览器中进行填充/填充，例如 es6-promise 和 object-assign(npm 上的包)。

目前我只是将它们加载到需要它们的每个模块中:

var assign  = require('object-assign');
var Promise = require('es6-promise');

我知道这绝对不是要走的路。它很难维护，我想透明地使用 ES6 功能，而不是通过需求“依赖”它们。

加载此类垫片的 final方法是什么？我在互联网上看到了几个例子，但它们都是不同的。我可以:

• 从外部加载它们:

  var bundle = browserify(); 
  bundle.require('s6-promise');
  // or should I use it bundle.add to make sure the code is runned???
  

  我这里的问题是我不知道模块的顺序 将在浏览器中加载。所以 polyfill 可能没有发生 但在需要 polyfill 功能的调用站点。

  这有一个额外的缺点，即后端代码无法从中受益 polyfills(除非我遗漏了什么)。

• 使用 browserify-shim 或类似的东西。我真的不明白这对 ES6 功能有什么作用。

• 手动设置 polyfill:

  Object.assign = require('object-assign');
  

Answer 1

不要在你的模块中使用 polyfill，这是一种反模式。您的模块应该假设运行时已修补(在需要时)，这应该是契约(Contract)的一部分。 ReactJS 就是一个很好的例子，它们明确定义了运行时的最低要求，以便库可以工作:http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills

您可以使用 polyfill 服务(例如:https://cdn.polyfill.io/)在页面顶部包含一个优化的脚本标签，以确保运行时已正确修补您需要的部分，而现代浏览器不会受到惩罚。