使用Browserify加载polyfill和垫片的正确方法是什么

Question

我正在建立一个网络应用程序,我开始了解并喜欢Browserify.但有一件事让我感到烦恼.

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

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

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

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

加载这些垫片的最终方法是什么？我在互联网上看到了几个例子,但它们各不相同.我可以:

• 从外部加载它们:

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

  我在这里遇到的问题是我不知道模块将在浏览器中加载哪个顺序.因此,在需要polyfilled功能的呼叫站点上可能尚未发生填充.

  这还有一个额外的缺点,即后端代码无法从这些polyfill中受益(除非我遗漏了一些东西).

• 使用browserify-shim或类似的东西.我真的不明白这对ES6功能有何用处.

• 手动设置polyfilling:

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

Answer 1

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

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