concaténer requirejs modules en un seul fichier

Je suis en train de concaténer tous mes nécessite des modules et quelques modèles de texte en un seul concaténés et uglified main.min.js, afin que je puisse inclure ce fichier dans mon code HTML.

J'ai compris concaténation et uglifying partie. Cependant, je ne suis pas en mesure de réellement exécuter du code dans le navigateur.

J'ai créé un nu-os de projet sur github, pour reproduire le problème.

Structure de fichier:

  • main.js
  • index.html
  • log.js
  • l'accumulation de 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 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>

donc index.html dans un navigateur, il imprime

de chargement main.js
chargé
chargé principal

mais il imprime uniquement la première ligne de

de chargement main.js

tout le monde le sait, pourquoi c'est le cas?

Vous devrez peut-être définir paths: { requireLib : 'lib/require/require' } dans votre fichier de build. Voir ici.
merci @c24w. requireLib doivent être prises à partir de mon main.js comme je l'ai préciser mainConfigFile : 'main.js'. J'ai essayé de toute façon. Ne fonctionne pas

OriginalL'auteur forste | 2013-04-02

  1. 9

    J'ai juste eu un oeil de plus près à votre code.

    Je ne suis pas sûr de savoir pourquoi vous êtes en train de charger dans le minifiés fichier à l'aide de:

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

    C'est toujours un AMD module, de sorte qu'il doit être chargé à l'aide d'un AMD chargeur (sinon, le define n'est pas gérés).

    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: alors que l'extérieur nécessitent des charges dans le minifiés fichier contenant tous les modules), vous avez également besoin d'un deuxième, imbriqués besoin de charger le réel module est toujours connu comme principal.

    C'est tout à fait trompeur avoir un seul module nommé principal puis une version compacte de l'ensemble des modules nommés principal.min. Par exemple, je pourrais attendre principal être exactement le même que principal.min, mais sans optimisations appliquées. Vous pouvez envisager de changer le nom pour quelque chose comme:

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

    Edit 2: dans votre fichier de build:

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

    Qui fera de requirejs nom que le module principal à la place:

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

    Maintenant: require(['main']) trouve (et les charges) le module nommé principal locales dans le champ d'application du fichier compilé.

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

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

    name: 'main.js'

    et ajouter un chemin d'alias pour le construire config ou le moment de l'exécution config:

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

    (Ce hasard de la pensée vient avec aucune garantie.)

    merci @c24w. la solution que vous avez posté ne charge pas la concaténation de script, mais les charges de tous les modules séparément. donc, dans mon chrome web developer tools > Ressources > les Scripts que vous voyez que log.js et main.js chargées. Je veux charger un seul fichier contenant tous les modules
    Désolé, j'ai mis à jour ma réponse.
    merci encore. ce travail est presque parfaitement. dernière chose: le module principal (main.js) est chargé à deux reprises. une fois à l'intérieur de la concaténation de fichiers myApp.js (plus tôt main.min.js) et une fois que le module lui-même. seul le module lui-même est exécuté, puis le chargement de tous les autres modules de la myApp.js
    Mis à jour à nouveau - il est difficile de se rappeler toutes les petites modifications que je fais comme j'y vais! Requirejs peut dégénérer très vite 🙁
    wow, merci! c'est tout à fait un hack fait de renommer main.js à la main dans le fichier build. la valeur de " nom " est utilisée pour les deux totalement différents, apparemment. tout d'abord, il est utilisé pour trouver le point d'entrée de votre application, c'est à dire le fichier principal. mais en outre, en raison de requirejs de l'algorithme de recherche, nous pouvons l'utiliser pour charger le module.

    OriginalL'auteur c24w

  2. 0

    La fin de la partie, mais j'ai pensé qu'il serait utile pour d'autres personnes qui pourraient être à la recherche d'une solution similaire. Et j'ai décidé de poster ici à des fins de documentation.

    Il est également browserify qui fait exactement ce que vous cherchez. Son utilisation est similaire à besoin (mnp), mais vous pouvez l'utiliser sur le navigateur côté. J'ai trouvé utile.

    OriginalL'auteur Alp