AngularJS结合RequireJS作文件合并压缩的那些坑

我在项目使用了AngularJS框架，用RequireJS作异步模块加载（AMD），在作文件合并压缩时，遇到了一些坑，有些只是解决了，但不明白缘由。

那些坑

1. build.js里面的paths必须跟main.js里面的保持一致。

这个build.js就是r.js使用的配置文件，而main.js就是RequireJS的main文件。在合并压缩时候，build.js文件里面也须要写paths，并且仍是跟main.js同样，我很奇怪为何就不能识别main里面的require.config的paths，免得合并的时候还要将paths拷贝过来（我试过build.js里面没有paths，是不能合并的）。（-_-!!!）

2. 某些依赖库须要写整个相对路径才能作合并。

在项目里， 我使用一个叫layer的第三方库（库是以requireJS define写的），一开始只作开发时候，在paths配置了路径后，使用此库只须要用个简称（define依赖时候）。 但在作合并时候，居然提示文件不存在（由于直接拿简称去拼文件地址了），无奈之下只能修改这个库的使用办法，所有使用到这个库的都写整个相对路径，这个时候开发和作合并才没有错。

3. 合并以后能够运行，加上压缩就不能够。

这个是最严重问题，最严重问题，最严重问题。在文件合并压缩后，使用文件时候，AngularJS运行就不正常了，老是报模块初始化失败，Failed to instantiate module common due to: Error: [$injector:unpr] Unknown provider: e，以下图。 

很关键的一个点就是，不压缩能够用，一旦压缩了（用了默认的压缩），使用就会报错。因此思考一定某些东西被“压坏”了，网上某些文章都说是须要下面这样写AngularJS cntroller、directive等，使用的服务用字符串定义。

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

但是个人整个应用就是这样定义，并无给它注入错误的机会。最后在无奈之下，就只能配置mangle: false，不混淆变量名，这样作后，合并压缩的文件就能正确使用了！！！

PS：简单说法就是，合并压缩能够，变量名不能混淆（总以为怪怪的），感受问题暂时无解。

4. 第二层的require，作合并的时候，是合并不出来。

例如在mian.js里面这样加载模块，在合并时候会发现第二层的require并无被合并到。

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

这时须要在build.js加findNestedDependencies: true, 这时才会合并第二层。

合并准备

安装nodejs

文件合并压缩基于nodejs，因此先安装nodejs，下载地址： http://blog.nodejs.org/2013/07/25/node-v0-10-15-stable/

下载r.js

r.js配合requirejs模块写法对文件进行合并，压缩，下载地址： https://github.com/jrburke/r.js

简单配置

配置文件最好写一个build.js，以下：

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

这里就讲几个关键属性：

baseUrl：全部的模块（般就是js）都相对于这个路径存在。

optimize：优化脚本文件的方式，有下面5种取值方式。

• uglify：（默认） 用UglifyJS压缩。
• uglify2： 用UglifyJS2（ 2.1.2+）压缩。
• closure： 使用Google's Closure Compiler 简单优化模式压缩文件, 仅在优化工具使用Java有效。
• closure.keepLines：跟closure参数同样, 只不过保留换行符。
• none： 不作压缩。

findNestedDependencies：寻找require()里面的require或define调用的依赖。

PS：配置属性还有不少，就不一细细说了，有篇文章写得很详尽，地址：http://segmentfault.com/a/1190000002403806#articleHeader37

当文件配置好后，就执行命令合并压缩

node r.js -o build.js

总结 

RequireJS模块的合并压缩仍是比较简单的，可是遇到AngularJS，在压缩方面就有些问题了，目前没找到什么更好办法。

 

本文为原创文章，转载请保留原出处，方便溯源，若有错误地方，谢谢指正。

本文地址 ： http://www.cnblogs.com/lovesong/p/5116355.html