你的位置:首页 > 软件开发 > Java > AngularJS结合RequireJS做文件合并压缩的那些坑

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

发布时间:2016-01-09 15:00:18
我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因。那些坑1. build.js里面的paths必须跟main.js里面的保持一致。这个build.js就是r.js使用的配置文件,而m ...

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

我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因。

那些坑

可是我的整个应用就是这样定义,并没有给它注入错误的机会。最后在无奈之下,就只能配置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"})

原标题:AngularJS结合RequireJS做文件合并压缩的那些坑

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。