Предварительная загрузка библиотек polyfill с использованием requirejs

Я создаю wirejs приложение с помощью requirejs, Для IE 8 я использую полифиллы: cujo/poly библиотека js и требует, чтобы эта библиотека была предварительно загружена wirejs загружен.

Если бы я использовал 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']);

});

Этот документ рекомендует использовать shim Конфиг для этой цели. Тем не менее, я не смог понять, как. Некоторые из вещей, которые я пробовал:

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

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

Есть ли лучший способ приблизиться к этому?

Любая помощь приветствуется!... спасибо за ваше время!

Источник

2 ответа

Решение

Я использую RequireJS вместе с полифиллами, но я не использую RequireJS для их загрузки. Цель полизаполнения - сделать так, чтобы браузер, в котором отсутствует функция X, выглядел так, как если бы он действительно имел функцию X. Я предпочитаю установку, в которой весь код, который я запускаю (за исключением самих полизаполнений), уже работает с полизаполнениями. загружен так, чтобы код работал с тем же набором функций, доступных для него, независимо от того, какой браузер выполняет код. Поэтому я хочу, чтобы мои полифилы загружались до RequireJS.

Но если мы игнорируем это предпочтение, можно ли использовать RequireJS для загрузки полизаполнений? Да, но RequireJS не сделает это легко. Нет никакого тривиального способа сказать RequireJS "это тело кода должно быть загружено до того, как вы загрузите что-нибудь еще", что вы хотели бы для полизаполнений. Что вам нужно сделать, это вызвать вручную require так что ваши полифилы загружаются первыми. Ваш 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, чтобы убедиться, что полифилы загружаются первыми.

Источник

Я столкнулся с той же проблемой, и мое решение состояло в том, чтобы Require.js загружал polyfills как зависимости для меня. В этом разделе вы можете увидеть, как я решил это в сочетании с http://conditionerjs.com/, но решение без него остается тем же.

Я выбрал функцию обнаружения загрузки полифиллов, чтобы новые браузеры не делали ненужных запросов. Функция обнаружения делает это конкретное решение превосходным.

В вашем 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!
});
Источник
Другие вопросы по тегам