concaténer les modules requirejs dans 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 uglifié, afin que je puisse inclure ce fichier dans mon HTML.

J'ai compris la concaténation et la partie uglifiante. Cependant, je ne suis pas en mesure d'exécuter un code dans le navigateur.

J'ai créé un projet bare-bone sur github pour reproduire le problème.

Structure du fichier :

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

Je concatène main.js, log.js et require.js en utilisant le fichier de construction build-production :

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

main.js

require.config({
    paths: {
        requireLib : 'lib/require/require'
    },
    waitSeconds: 1000
});

console.log('loading main.js');

define(function(require) {
    var log = require('log');
    console.log('loaded')

    log.fine('main loaded');
});

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>

Ainsi, le fichier index.html d'un navigateur devrait s'afficher comme suit

chargement de main.js
l chargé principal

mais il n'imprime que la première ligne

chargement de main.js

quelqu'un sait-il pourquoi il en est ainsi ?

Answer 1

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

Je ne sais pas pourquoi vous chargez le fichier minifié en utilisant :

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

Il s'agit toujours d'un AMD et doit donc être chargé à l'aide d'un chargeur AMD (sinon le module define n'est pas traité).

Cela fonctionne :

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

Edita: Alors que l'exigence extérieure charge le fichier minifié (contenant tous les modules), vous avez également besoin d'une deuxième exigence, imbriquée, pour charger le module réel, toujours connu sous le nom de principal .

Il est assez trompeur d'avoir un seul module nommé principal puis d'une version minifiée de tous les modules nommés main.min . Par exemple, je peux m'attendre à ce que principal pour être exactement la même que main.min mais sans aucune optimisation. Vous pouvez envisager de renommer votre site en quelque chose comme :

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

Editer 2 : dans votre fichier de construction :

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

Cela permettra à requirejs de nommer ce module principal au lieu de cela :

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

Aujourd'hui : require(['main']) trouve (et charge) le module nommé principal dans la portée locale du fichier compilé.

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

Editer 3 : alternativement à Édition 2 dans votre fichier de construction, vous pourriez conserver :

name: 'main.js'

et ajoutez un alias de chemin à la configuration de compilation ou à la configuration d'exécution :

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

(Cette pensée aléatoire n'est assortie d'aucune garantie).

Answer 2

Je suis arrivé en retard, mais j'ai pensé que cela pourrait être utile à d'autres personnes qui pourraient être à la recherche d'une solution similaire. Et j'ai décidé de le publier ici à des fins de documentation.

Il y a aussi browserify qui fait exactement ce que vous recherchez. Son utilisation est similaire à celle de exiger (sur npm) mais vous pouvez l'utiliser côté navigateur. Je l'ai trouvé utile.