Question

我正在使用wirejs创建一个requirejs应用。对于IE 8，我使用polyfills：cujo/poly js库并要求在加载wirejs之前预先加载此lib。

如果我使用curl作为AMD加载程序，根据文档，我有以下选项：

curl({ preloads: [ "poly" ] });

对我有用的是：

// in index.html

<script data-main="js/app" src="js/lib/require.js"></script>

// in js/app.js

define(function(){
   // set configuration options
   requirejs.config({// set config with paths});

   // require the library and HOPE it will load before
   // everything else!
   require(['poly']);

});

This document建议使用shim配置来实现此目的。但是，我还没弄清楚如何。我试过的一些事情：

// DID NOT WORK!!
requirejs.config({

....
"shim": {
   "poly": {
     "exports": "poly"
    }
 }
});

有没有更好的方法来解决这个问题？

感谢任何帮助！...感谢您的时间！

Answer 1

我确实将RequireJS与polyfill一起使用，但我没有使用RequireJS来加载它们。 polyfill的目标是使缺少X特征的浏览器看起来好像实际上具有X特征。我更喜欢一个设置，其中所有我运行的代码（除了polyfill之外）他们自己运行已经加载的polyfill，以便代码运行时可以使用相同的功能集，无论浏览器运行什么代码。所以我希望在RequireJS之前加载我的polyfill。

但是如果我们忽略这个偏好，可以使用RequireJS加载polyfill吗？是的，但RequireJS不会让事情变得简单。告诉RequireJS没有什么简单的方法“在加载其他任何东西”之前必须加载这个代码体，这就是你想要的polyfill。您需要做的是手动调用require，以便首先加载您的polyfill。您的index.html可能类似于：

<script>
    require = {
       // Your config.
       //
       // Setting a global require before loading RequireJS is one way to give it
       // a config.
    };
</script>
<script src="js/lib/require.js"></script>
<script>
    // No data-main above...
    //
    // This double require ensures that the polyfills are loaded first.
    require(["poly"], function () {
        require(["js/app"]);
    });
</script>

js/app.js变为：

define(function(){
    // whatever...
});

在可能有多个js/app以外的入口点的大型应用程序中，每次要从RequireJS模块外部加载模块时都必须使用上面的双重要求，以确保polyfill是首先加载。

Answer 2

我遇到了同样的问题，我的解决方案是让Require.js加载polyfills作为我的依赖项。您可以在this gist中看到我如何与Conditioner.js结合使用，但没有它就可以解决问题。

我选择了检测加载polyfill的功能，因此较新的浏览器不会发出不必要的请求。特征检测使这一特定解决方案更加出色。

在index.html：

中

<script src="/js/require.js" data-main="/js/main"></script>

在文件/js/main.js中：

var _polyfills = [];
if (!('classList' in document.documentElement)) {
    _polyfills.push('polyfills/classList');
}
// ... more feature detects & polyfills ...

require(['bootstrap'].concat(_polyfills), function(bootstrap) {
    bootstrap.run(); // Bootstrap your app here!
});

使用requirejs预加载polyfill库

2 个答案: