2017-07-31 3 views
1

Nous avons rencontré un problème intéressant dans un projet existant,Module ordre de chargement dans requirejs

  1. Nous utilisons requireJS
  2. Tous nos modules sont conformes AMD (et nous avons beaucoup d'entre eux)
  3. Nous devons inclure un sous-ensemble de babel-polyfill en tant que module AMD au projet.
  4. Il est impossible d'ajouter manuellement cette dépendance à tous les modules un par un
  5. Notre code est optimisé et empaquetés en utilisant r.js

Notre fichier principal ressemble à quelque chose comme ceci: // main.js

require(
[ 
    'router', 
    'someOtherModule', /* In reality we have quite a few more here */ 
], function(Router, AppModule) {/*... app code ...*/} 
) 

Donc, nous aimerions charger ce module polyfill avant que tout autre module ne soit chargé main.js

Ce qui ne fonctionne pas:

  1. Shim - Shim est utilisé pour les modules non-AMD.
  2. Ajout du polyfill à la liste ci-dessus router - dans le code minified que r.js recrache, il n'y a aucune garantie que polyfill sera effectivement dans le code avant router, ce n'est pas le comportement défini et ne peut donc pas compter sur lui.
  3. Envelopper tout avec un autre require['polyfill'] appel semble bousiller l'optimiseur r.js, il ne semble pas le faisceau ensemble les autres modules s'ils sont enveloppés dans require[].
  4. Depuis le polyfill est un module AMD, nous ne pouvons pas l'inclure dans le <HEAD>

Option 3 est toujours quelque chose que nous enquêtons pour voir s'il est possible.

Donc la question est - est ce que nous essayons de faire possible?

Répondre

0

Chaque fois que je charger polyfills je toujours toujours toujours leur charge dans un élément script dans head. Je ne les charge jamais à travers RequireJS. Les charger à travers RequireJS donne lieu à toutes sortes de problèmes, comme vous l'avez découvert. Vous avez écrit:

Puisque le polyfill est un module AMD, nous ne pouvons pas simplement l'inclure dans le <HEAD>.

Le paquet babel-polyfillbuilds itself dans un script qui peut être chargé par un élément script en utilisant Browserify:

#!/bin/sh 
set -ex 

BROWSERIFY_CMD="../../node_modules/browserify/bin/cmd.js" 
UGLIFY_CMD="../../node_modules/uglify-js/bin/uglifyjs" 

mkdir -p dist 

node $BROWSERIFY_CMD lib/index.js \ 
    --insert-global-vars 'global' \ 
    --plugin bundle-collapser/plugin \ 
    --plugin derequire/plugin \ 
    >dist/polyfill.js 
node $UGLIFY_CMD dist/polyfill.js \ 
    --compress keep_fnames,keep_fargs,warnings=false \ 
    --mangle keep_fnames \ 
    >dist/polyfill.min.js 

Si vous inspectez dist/polyfill.js, vous verrez que ce n'est pas un module AMD. (La fonction define qu'il appelle n'est pas la fonction define d'AMD.)

Vous devriez être en mesure d'adapter cette méthode à votre sous-ensemble de babel-polyfill que vous utilisez.