Be careful! Angularjs combine Requirejs to do file merge compress those pits _javascript tips

In the project uses the ANGULARJS framework, uses the Requirejs to do the asynchronous module loading (AMD), when does the file merge compression, encountered some pits, some just solved, but did not understand the reason.

Those pits
1. The paths inside the build.js must be consistent with the main.js inside.

This build.js is the configuration file that R.js uses, and Main.js is the Requirejs main file. When merging the compression, Build.js file inside also need to write paths, and still like main.js, I am very strange why can't recognize the require.config paths in Main, save the time to merge paths copy over (I tried build.js inside no paths, is not merged). （-_-!!! ）

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

In the project, I use a called Layer third Party library (library is written in Requirejs define), at the beginning only to do development, after paths configured the path, use this library only need a short name (define dependency). But in doing the merge, unexpectedly prompts the file does not exist (because directly to the address of the spelling file), but only to modify the use of this library, all the use of this library to write the entire relative path, this time to develop and do merge is not wrong.

3. After the merger can be run, plus compression can not.

This is the most serious problem, the most serious problem, the most serious problem. After the file merge compression, use the file, Angularjs run is not normal, always report module initialization failure, Failed toinstantiate module common due to:error: [$injector: UNPR] Unknown provider:e, as shown below.

A key point is that no compression can be used, once compressed (with the default compression), use will be an error. So thinking must be something "crushed", some articles on the web are said to need to write the following Angularjs cntroller, directive, and so on, the service used by the string definition.

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

But my entire application is this definition, does not give it the opportunity to inject the wrong. Finally, in desperation, you can only configure Mangle:false, do not confuse variable names, after doing so, merging compressed files can be used correctly!!!

PS: The simple saying is, merge compression can, variable name can not be confused (always feel Strange), feel the problem for the time being no solution.

4. The second layer of require, when merging, is not merged.

For example, loading a module in Mian.js will reveal that the second layer of require is not merged into the merge.

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

At this point, you need to add Findnesteddependencies:true in Build.js, then the second layer will be merged.

Merge preparation

1. Installation Nodejs

File merge compression is based on Nodejs, so install Nodejs first.

2, download R.js

R.js with Requirejs module, the file is merged and compressed.

Simple configuration

The configuration file is best written with a build.js, as follows:

({
  BaseURL: ". /",
  paths: {//...
  },
  shim: {
   //...
  },
  optimize:" Uglify2 ",
  uglify2: {
  Mangle:false//false does not confuse variable names
  },
  findnesteddependencies:true,
  name: "Js/main", Out
  : ". /js/main-built.js "
})

Here are a few key attributes:

BaseURL: All modules (like JS) are relative to this path.

Optimize: The way to optimize the script file is in the following 5 ways of taking values.

• 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 in the optimization tool using Java is effective.
  
• Closure.keeplines: Like the closure parameter, it just preserves line breaks.
  
• None: Do not compress.

Findnesteddependencies: Looking for require () inside require or define invocation dependencies.

PS: Configuration Properties There are many, it is not carefully said. When the file is configured, execute the command merge compression.

Node R.js-o build.js

Summarize

Requirejs Module Merge compression is relatively simple, but encountered Angularjs, in the compression of some problems, there is no better way to find.

The above is the detailed content of this article, I hope to help you learn.