小心!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 co妹妹on due to: Error: [$injector:unpr] Unknown provider: e,以下图。
很关头的一个点便是,不压缩可以用,一旦压缩了(用了默认的压缩),运用就会报错。以是斟酌一定某些工具被“压坏”了,网上某些文章都说是必要前面多么写AngularJS cntroller、directive等,运用的办事用字符串概念。
co妹妹onModule.controller( "broswerCtrl" ,["$scope" ,"$sce" , function ($scope,$sce){
不过我的整个运用便是多么概念,并无给它注入过失的时机。起初正在无法之下,就只能设置mangle: false,不混杂变量名,多么做后,离开压缩的文件就可以准确运用了!!!
PS:庞杂说法便是,离开压缩可以,变量名不克不及混杂(总觉得怪怪的),觉得标题暂时无解。
4. 第二层的require,做离开的时辰,是合其实不进来。
比喻正在mian.js内里多么加载模块,正在离开时辰会看见第二层的require并无被离开到。
require([ "CO妹妹ON"], function(){
require([ "angular", "LOGIN" ], function(angular){
//....
});
});
这时分必要正在build.js加findNestedDependencies: true, 这时分才会离开第二层。
离开筹备
一、安放nodejs
文件离开压缩基于nodejs,以是先安放nodejs。
二、下载r.js
r.js独特requirejs模块写法关于文件举办离开,压缩。
庞杂设置
设置文件最佳写一个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: 运用谷歌's Closure Compiler 庞杂优化情势压缩文件, 仅正在优化货色运用Java有用。
closure.keepLines:跟closure参数同样, 只可是保留换行符。
none: 不做压缩。
findNestedDependencies:探究require()内里的require或许define调用的依赖。
PS:设置属性另有不少,就纷歧细细说了。当文件设置好后,就实施号召离开压缩
node r.js -o build.js
总结
RequireJS模块的离开压缩仍是有点庞杂的,可是遇到AngularJS,正在压缩方面就有些标题了,今朝没找到甚么更好办法。
以上便是本文的详细内容,但愿关于各人的深造有所帮助。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。