Quelle est la meilleure façon de concaténer les fichiers js du fournisseur?

Question

Dans mon application Angular JS, j'utilise beaucoup de paquets tiers, principalement gérés via Bower.

Lorsque j'utilise Grunt pour concaténer tous dans un seul fichier méga, je reçois des erreurs lorsque je charge ma page, par exemple, que

Uncaught ReferenceError: angular is not defined et

GET http://localhost:8080/theproj/v4/dist/app/bootstrap.css.map 404 (Not Found)

Quelle est la Le meilleur moyen de concaténer correctement tous ces fichiers pour s'assurer que tout se charge dans le bon ordre et ne cause pas de problèmes?

Answer 1

Premier numéro: Un grand nombre de fois les bibliothèques tierces doivent être chargées dans un ordre particulier. On dirait que c'est la source de votre premier numéro. Quelque chose essaie d'utiliser angulaire et il est chargé avant le code angulaire. Vous devriez refactoriser votre tâche grunt pour utiliser une commande prédéfinie pour les bibliothèques tierces.

Deuxième édition: Il vous manque probablement le fichier .map. Ceci est un fichier utilisé par les outils de développement de Chrome pour vous montrer la source originale pour le css (sass ou moins). Fournissez le fichier map ou supprimez la référence à partir de bootstrap.css. Ou simplement ignorer l'erreur, c'est seulement une erreur quand vous avez des outils de développement chrome ouverts, et n'affecte pas réellement votre application.

Answer 2

Pour la question de la bonne commande pour vos fichiers javascript, j'ai eu ce problème dans un projet plus vaste où personne n'avait vraiment une idée qui était l'ordre correct. Heureusement, nous avons trouvé que le Google fermeture du compilateur fait exactement ceci: https://github.com/google/closure-compiler

Vous donnez tous vos fichiers js et il les analyse tous et les concaténer pour

$ java -jar compiler.jar --js_output_file=out.js in1.js in2.js in3.js ... 

Il y a même un plugin grunt pour la connexion: https://github.com/gmarty/grunt-closure-compiler

'closure-compiler': { 
     frontend: { 
      closurePath: '/src/to/closure-compiler', 
      js: 'static/src/frontend.js', 
      jsOutputFile: 'static/js/frontend.min.js', 
      maxBuffer: 500, 
      options: { 
       compilation_level: 'ADVANCED_OPTIMIZATIONS', 
       language_in: 'ECMASCRIPT5_STRICT' 
      } 
     } 
    }, 

Une autre façon serait de changer vos javascripts en modules ou AMD CommonJS, de cette façon vous n'avez pas à vous soucier de l'ordre. RequireJS (http://requirejs.org/docs/start.html) est une possibilité pour AMD par exemple ou Webpack (http://webpack.github.io/) ... ou beaucoup d'autres.