concaténate requirejs modules en un seul fichier

Question

J'essaie de concaténer tous mes modules requis et quelques modèles de texte en un seul main.min.js concaténé et optimisé, donc je peux inclure ce fichier dans mon HTML.

J'ai trouvé une partie concaténation et uglifying. Cependant, je ne suis pas en mesure d'exécuter du code dans le navigateur alors. J'ai créé un bare-bone project on github pour reproduire le problème.

Structure du fichier:

• main.js
• index.html
• log.js
• build-production
• lib/require.js
• node_modules/require/bin /r.js

Je concaténer main.js, log.js et require.js en utilisant le fichier BUILD-production:

./node_modules/requirejs/bin/r.js -o build-production.js 

main.js

build-production.js:

({ 
    mainConfigFile : 'main.js', 
    include : [ 'requireLib' ], 
    name : 'main.js', 
    out : 'main.min.js' }) 

index.html:

<script src="main.min.js" type="text/javascript"></script> 

si l'index .html dans un navigateur doit imprimer

chargement main.js
chargé chargé principal

mais il n'imprime la première ligne

chargement main.js

Quelqu'un sait-il, pourquoi est-ce le cas?

Answer 1

Je viens d'examiner de plus près votre code.

Je ne sais pas pourquoi vous chargez dans le fichier minified en utilisant:

<script src="main.min.js" type="text/javascript"></script> 

Il est encore un module AMD, doit donc être chargé dans l'utilisation d'un chargeur AMD (sinon le define ne le fait pas être manipulé).

Cela fonctionne:

<script type="text/javascript" src="lib/require/require.js"></script> 
<script type="text/javascript"> 
    require(['main.min'], function() { 
     require(['main'], function() {}); 
    }); 
</script> 

Edit: tandis que l'extérieur nécessite des charges dans le fichier minified (contenant tous les modules), vous avez également besoin d'une seconde, imbriqué besoin de charger le module réel encore connu sous le nom principal.

Il est tout à fait trompeur ayant un module unique nommé principal puis une version minified de tous les modules nommés main.min. Par exemple, je pourrais attendre principal pour être exactement le même que main.min, mais sans aucune optimisation appliquée. Vous pouvez envisager de renommer à quelque chose comme:

point d'entrée
• : myApp
• compilé (optimize: 'none'): principale
• compilé (optimize: 'uglify2'): main.min

Éditez 2: dans votre fichier de construction:

name: 'main.js' → name: 'main'

Cela fera le nom requirejs ce module principal à la place:

define('main.js', ...); → define('main', ...);

maintenant: require(['main']) trouve (et charges) le module nommé principal dans les locaux portée du fichier compilé.

Avant: require(['main']) n'a pas trouvé un module nommé principal (il a été nommé main.js) si la traite comme un nom de fichier et charges ./main.js.

Edit 3: alternativement Edit 2, dans votre fichier de construction, vous pouvez retenir:

name: 'main.js'

et ajouter un alias de chemin soit la configuration de construction ou de la configuration d'exécution:

paths: { 'main' : 'main.js' }

(Cette pensée aléatoire est sans garantie.)