RequireJS：使用Modernizr有条件地加载Polyfill

Question

如何将polyfill脚本包装为AMD模块并使用Modernizr和RequireJS有条件地加载它？

（在我起草问题时想出来 - 为其他试图做同样事情的人发布答案。）

Answer 1

对于不支持输入占位符的浏览器，我需要加载的polyfill是jquery-placeholder。它没有开箱即用的AMD支持。

首先我把它包装成这样的AMD模块：

define(['jquery'], function ($) {
  (function(window, document, $) {
    ... polyfill ...
  }(this, document, jQuery));
});

然后在main.js中，我使用Modernizr有条件地require()填充脚本：

require(['jquery', 'modernizr'], function ($, Modernizr) {
  if (!Modernizr.input.placeholder) {
    require(['jquery', 'placeholder'], function ($) {
      $('#input').placeholder();
    });
  }
});