prudent! Les pièges de la fusion et de la compression de fichiers à l'aide d'AngularJS combinés aux compétences RequireJS_javascript

Le framework AngularJS a été utilisé dans le projet et RequireJS a été utilisé pour le chargement asynchrone de modules (AMD). Lors de la fusion et de la compression de fichiers, j'ai rencontré certains pièges, mais je n'en ai pas compris les raisons.

Ces fosses
1. Les chemins dans build.js doivent être cohérents avec ceux de main.js.

Ce build.js est le fichier de configuration utilisé par r.js, et main.js est le fichier principal de RequireJS. Lors de la fusion et de la compression, les chemins doivent également être écrits dans le fichier build.js, et ils sont toujours les mêmes que main.js. Je suis très surpris de savoir pourquoi les chemins de require.config dans main ne peuvent pas être reconnus, afin de les enregistrer. la nécessité de copier les chemins lors de la fusion (j'ai essayé qu'il n'y ait pas de chemins dans build.js et qu'il ne puisse pas être fusionné). (-_-!!!)

2. Certaines bibliothèques dépendantes doivent écrire l'intégralité du chemin relatif avant de fusionner.

Dans le projet, j'utilise une bibliothèque tierce appelée layer (la bibliothèque est écrite avec requireJS set). Quand je faisais seulement du développement au début, après avoir configuré le chemin dans paths, je n'ai besoin que de l'abréviation). (définir) pour utiliser cette bibliothèque en fonction du temps). Mais lors de la fusion, il m'a été demandé que le fichier n'existait pas (car l'abréviation était directement utilisée pour épeler l'adresse du fichier). En désespoir de cause, je n'ai pu que modifier l'utilisation de cette bibliothèque. Tous ceux qui utilisaient cette bibliothèque ont écrit le. chemin relatif complet. À ce moment-là, j'ai développé Il n'y a rien de mal à fusionner.

3. Il peut être exécuté après la fusion, mais pas après la compression.

C'est le problème le plus grave, le problème le plus grave, le problème le plus grave. Une fois les fichiers fusionnés et compressés, AngularJS s'exécute anormalement lors de l'utilisation des fichiers et signale toujours un échec d'initialisation du module, Échec de l'instanciation du module commun en raison de : Erreur : [$injector:unpr] Fournisseur inconnu : e , comme indiqué ci-dessous.

Un point très important est qu'il peut être utilisé sans compression (la compression par défaut est utilisée), une erreur sera signalée lors de son utilisation. Je pense donc que quelque chose doit être "écrasé". Certains articles sur Internet disent que vous devez écrire le contrôleur, la directive, etc. AngularJS comme suit, et les services utilisés sont définis dans des chaînes.

commonModule.controller( "broswerCtrl" ,["$scope" ,"$sce" , function ($scope,$sce){

Mais toute mon application est définie de cette façon, et il n'y a aucune chance d'y injecter des erreurs. Au final, je n'ai eu d'autre choix que de configurer mangle: false sans confondre les noms de variables. Après cela, les fichiers fusionnés et compressés peuvent être utilisés correctement ! ! !

PS : Pour faire simple, la fusion et la compression peuvent être effectuées, mais les noms de variables ne peuvent pas être confondus (ça fait toujours bizarre, j'ai l'impression que le problème n'a pas de solution pour le moment).

4. La deuxième couche d'exigences ne peut pas être fusionnée lors de leur fusion.

Par exemple, si vous chargez le module comme ceci dans main.js, vous constaterez que la deuxième couche de require n'a pas été fusionnée lors de la fusion.

require([ "COMMON"], function(){
  require([ "angular", "LOGIN" ], function(angular){
   //....
  });
});

À ce stade, vous devez ajouter findNestedDependencies: true à build.js, puis la deuxième couche sera fusionnée.

Préparation de la fusion

1. Installer nodejs

La fusion et la compression de fichiers sont basées sur nodejs, alors installez d'abord nodejs.

2. Téléchargez r.js

r.js coopère avec la méthode d'écriture du module requirejs pour fusionner et compresser des fichiers.

Configuration simple

Il est préférable d'écrire un build.js pour le fichier de configuration, comme suit :

({
  baseUrl:"../",
  paths: {
   //...
  },
  shim: {
   //...
  },
  optimize: "uglify2",
  uglify2: {
  mangle: false //false 不混淆变量名
  },
  findNestedDependencies: true,
  name: "js/main",
  out: "../js/main-built.js"
})

Voici quelques attributs clés :

baseUrl : Tous les modules (généralement js) existent par rapport à ce chemin.

optimiser : comment optimiser les fichiers de script. Il existe cinq méthodes de valeur ci-dessous.

• uglify : (par défaut) Compressé avec UglifyJS.
  
• uglify2 : Compressé avec UglifyJS2 (2.1.2).
  
• closure : utilisez le mode d'optimisation simple du compilateur Closure de Google pour compresser les fichiers, valable uniquement lorsque l'outil d'optimisation utilise Java.
  
• closure.keepLines : Identique au paramètre de fermeture, sauf que les nouvelles lignes sont conservées.
  
• aucun : Pas de compression.

findNestedDependencies : recherchez les dépendances appelées require ou définissez-les dans require().

PS : Il existe de nombreux autres attributs de configuration, je n'entrerai donc pas dans les détails. Lorsque les fichiers sont configurés, exécutez la commande pour fusionner et compresser

node r.js -o build.js

Résumé

La fusion et la compression des modules RequireJS sont relativement simples, mais lorsqu'il s'agit d'AngularJS, il y a quelques problèmes de compression, et aucun meilleur moyen n'a été trouvé jusqu'à présent.

Ce qui précède est le contenu détaillé de cet article, j'espère qu'il sera utile à l'étude de chacun.