小心!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 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
浅谈js原生拖放
Nov 21 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
js里面的变量范围分享
Jul 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数据缓存技术
2007/02/14 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
mongodb和php的用法详解
2019/03/25 PHP
javascript事件问题
2009/09/05 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
python ddt实现数据驱动
2018/03/14 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
python画双y轴图像的示例代码
2019/07/07 Python
python如何删除文件中重复的字段
2019/07/16 Python
python中eval与int的区别浅析
2019/08/11 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
报告会主持词
2014/04/02 职场文书
债务追讨律师函
2015/06/24 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python