careful! The pitfalls of file merging and compression using AngularJS combined with RequireJS_javascript skills

The AngularJS framework was used in the project and RequireJS was used for asynchronous module loading (AMD). When doing file merging and compression, I encountered some pitfalls. Some of them were solved, but I didn’t understand the reasons.

Those pits
1. The paths in build.js must be consistent with those in main.js.

This build.js is the configuration file used by r.js, and main.js is the main file of RequireJS. When merging and compressing, paths also need to be written in the build.js file, and they are still the same as main.js. I am very surprised why the paths of require.config in main cannot be recognized, so as to save the need to copy the paths when merging ( I tried that there are no paths in build.js and it cannot be merged). (-_-!!!)

2. Some dependent libraries need to write the entire relative path before merging.

In the project, I use a third-party library called layer (the library is written with requireJS define). When I was only doing development at the beginning, after configuring the path in paths, I only need to use the abbreviation (define) to use this library. dependent time). But when doing the merge, it was prompted that the file did not exist (because the abbreviation was directly used to spell the file address). In desperation, I could only modify the usage of this library. All those who used this library wrote the entire relative path. At this time, I developed There is nothing wrong with merging.

3. It can be run after merging, but not after compression.

This is the most serious problem, the most serious problem, the most serious problem. After the files are merged and compressed, AngularJS runs abnormally when using the files, and always reports module initialization failure, Failed to instantiate module common due to: Error: [$injector:unpr] Unknown provider: e , as shown below.

A very critical point is that it can be used without compression. Once compressed (default compression is used), an error will be reported when used. So I think something must be "crushed". Some articles on the Internet say that you need to write AngularJS cntroller, directive, etc. as follows, and the services used are defined in strings.

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

But my entire application is defined this way, and there is no chance of injecting errors into it. In the end, I had no choice but to configure mangle: false without confusing variable names. After doing this, the merged and compressed files can be used correctly! ! !

PS: To put it simply, merging and compression can be done, but variable names cannot be confused (it always feels weird). I feel that the problem has no solution for the time being.

4. The second layer of requirements cannot be merged when merging them.

For example, if you load the module like this in main.js, you will find that the second layer of require has not been merged during merging.

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

At this time, you need to add findNestedDependencies: true to build.js, and then the second layer will be merged.

Merge preparation

1. Install nodejs

File merging and compression is based on nodejs, so install nodejs first.

2. Download r.js

r.js cooperates with requirejs module writing method to merge and compress files.

Simple configuration

It is best to write a build.js for the configuration file, as follows:

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

Here are a few key attributes:

baseUrl: All modules (usually js) exist relative to this path.

optimize: How to optimize script files. There are five value methods below.

• uglify: (Default) Compressed with UglifyJS.
  
• uglify2: Compressed with UglifyJS2 (2.1.2).
  
• closure: Use Google's Closure Compiler simple optimization mode to compress files, only valid when the optimization tool uses Java.
  
• closure.keepLines: Same as the closure parameter, except that newlines are retained.
  
• none: No compression.

findNestedDependencies: Find the dependencies of require or define calls in require().

PS: There are many more configuration attributes, so I won’t go into details. When the files are configured, execute the command to merge and compress

node r.js -o build.js

Summary

The merge and compression of RequireJS modules is relatively simple, but when it comes to AngularJS, there are some problems with compression, and no better way has been found so far.

The above is the detailed content of this article, I hope it will be helpful to everyone’s study.