资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

AngularJS分别RequireJS做文件合并压缩的那些坑-创新互联

小心!AngularJS合并RequireJS做文件离开压缩的那些坑

小心!AngularJS合并RequireJS做文件离开压缩的那些坑,各人正在做文件离开压缩的时辰一定要注意,感乐趣的网友可以参考一下
正在项目运用了AngularJS框架,用RequireJS做异步模块加载(AMD),正在做文件离开压缩时,遇到了一些坑,有些只是搞定了,但不大白原因。

陆良网站建设公司创新互联公司,陆良网站设计制作,有大型网站制作公司丰富经验。已为陆良上1000家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱,请找那个售后服务好的陆良做网站的公司定做!

那些坑
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分别RequireJS做文件合并压缩的那些坑

很关头的一个点便是,不压缩可以用,一旦压缩了(用了默认的压缩),运用就会报错。以是斟酌一定某些工具被“压坏”了,网上某些文章都说是必要前面多么写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,正在压缩方面就有些标题了,今朝没找到甚么更好办法。

以上便是本文的详细内容,但愿关于各人的深造有所帮助。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享文章:AngularJS分别RequireJS做文件合并压缩的那些坑-创新互联
文章位置:http://www.cdkjz.cn/article/dssoih.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220