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


Posted in Javascript onJanuary 09, 2016

在项目使用了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结合RequireJS做文件合并压缩的那些坑

很关键的一个点就是,不压缩可以用,一旦压缩了(用了默认的压缩),使用就会报错。所以思考必定某些东西被“压坏”了,网上某些文章都说是需要下面这样写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, 这时才会合并第二层。

合并准备

1、安装nodejs

文件合并压缩基于nodejs,所以先安装nodejs。

2、下载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: 使用Google's Closure Compiler 简单优化模式压缩文件, 仅在优化工具使用Java有效。
  • closure.keepLines:跟closure参数一样, 只不过保留换行符。
  • none: 不做压缩。

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

PS:配置属性还有很多,就不一细细说了。当文件配置好后,就执行命令合并压缩

node r.js -o build.js

总结

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

以上就是本文的详细内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
理解 JavaScript 预解析
Oct 25 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
js初始化验证实例详解
Nov 26 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 #Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 #Javascript
javascript返回顶部的按钮实现方法
Jan 09 #Javascript
javascript类型系统 Array对象学习笔记
Jan 09 #Javascript
JS中生成随机数的用法及相关函数
Jan 09 #Javascript
JavaScript电子时钟倒计时
Jan 09 #Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 #Javascript
You might like
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
JS中setTimeout()的用法详解
2013/04/14 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
javascript操作cookie
2017/01/17 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
python 删除非空文件夹的实例
2018/04/26 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
python如何求解两数的最大公约数
2018/09/27 Python
python 循环数据赋值实例
2019/12/02 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
CSS3 边框效果
2019/11/04 HTML / CSS
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
Shein英国:女性时尚网上商店
2019/04/10 全球购物
店长岗位的工作内容
2013/11/12 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
社会实践心得体会
2014/01/03 职场文书
税务干部鉴定材料
2014/02/11 职场文书
警校毕业生自我评价
2014/04/06 职场文书
医院标语大全
2014/06/23 职场文书
爱心捐书活动总结
2014/07/05 职场文书
教师自查自纠材料
2014/10/14 职场文书
丽江古城导游词
2015/02/03 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
后天观后感
2015/06/08 职场文书