JavaAngularJS结合RequireJS做文件合并压缩的那么些坑

本人在项目利用了AngularJS框架,用RequireJS做异步模块加载(英特尔),在做文件合并压缩时,蒙受了有些坑,有个别只是涸泽而渔了,但不明了原委。

那些坑

壹.
build.js里边的paths必须跟main.js里面包车型地铁保持1致。

以此build.js正是r.js使用的铺排文件,而main.js就是RequireJS的main文件。在集合压缩时候,build.js文件之中也需求写paths,而且依旧跟main.js同样,作者很想获得为啥就不能够识别main里面包车型大巴require.config的paths,省得合并的时候还要将paths拷贝过来(小编试过build.js里面未有paths,是不能够集合的)。(-_-!!!)

2.
或多或少依赖库供给写整个绝对路线手艺做统一。

在档次里, 作者使用多个叫layer的第2方库(库是以requireJS
define写的),壹开头只做开辟时候,在paths配置了路线后,使用此库只需求用个简称(define依赖时候)。
但在做统目前候,竟然提醒文件不设有(因为平昔拿简称去拼文件地方了),无奈之下只可以修改这些库的应用办法,全体运用到这一个库的都写整个相对路线,那年开采和做联合才没错。

三.
统一之后方可运作,加上压缩就无法。

其壹是最要紧难题,最要紧难点,最沉痛难题。在文书合并压缩后,使用文件时候,AngularJS运转就不正规了,总是报模块初阶化失利,Failed to instantiate module common due
to: Error: [$injector:unpr] Unknown provider:
e,如下图。 Java 1

很要紧的3个点正是,不减弱能够用,1旦压缩了(用了默许的缩减),使用就会报错。所以思量必定有个别事物被“压坏”了,网上某个作品都视为必要上面那样写AngularJS
cntroller、directive等,使用的劳动用字符串定义。

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

不过小编的全部应用正是这般定义,并不曾给它注入错误的火候。最终在无奈之下,就只好配备mangle:
false,不混淆变量名,那样做后,合并压缩的公文就能正确行使了!!!

PS:轻松说法正是,合并压缩能够,变量名不能够歪曲(总感觉离奇),认为题目一时半刻无解。

四.
次之层的require,做统壹的时候,是统一不出来。

譬如在mian.js里面这么加载模块,在集合时候会发现第二层的require并从未被合并到。

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

那儿必要在build.js加findNestedDependencies: true, 那时才汇合并第3层。

集合准备

安装nodejs

文本合并压缩基于nodejs,所以先安装nodejs,下载地址: http://blog.nodejs.org/2013/07/25/node-v0-10-15-stable/

下载r.js

r.js合营requirejs模块写法对文件实行统1,压缩,下载地址: 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:优化脚本文件的点子,有下边八种取值情势。

  • uglify:(默认) 用UglifyJS压缩。
  • uglify2: 用UglifyJS2( 2.1.2+)压缩。
  • closure: 使用谷歌(Google)’s Closure Compiler 轻便优化格局压缩文件,
    仅在优化工具使用Java有效。
  • closure.keepLines:跟closure参数同样, 只可是保留换行符。
  • none: 不做缩减。

findNestedDependencies:寻觅require()里面包车型大巴require或define调用的依靠。

PS:配置属性还有为数不少,就不1细随笔了,有篇文章写得很详细,地址:http://segmentfault.com/a/1190000002403806#articleHeader37

当文件配置好后,就实施命令合并压缩

node r.js -o build.js

总结 

RequireJS模块的联结压缩还是比较简单的,不过蒙受AngularJS,在回落方面就不怎么标题了,如今没找到怎么样更加好措施。

 

正文为原创小说,转发请保留原出处,方便溯源,如有错误地点,多谢指正。

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

相关文章