小心!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实现画板的代码
Sep 05 Javascript
js程序中美元符号$是什么
Jun 05 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 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 XPath对XML文件查找及修改实现代码
2011/07/27 PHP
解析php常用image图像函数集
2013/06/24 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
jquery radio 操作代码
2011/03/16 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
银行员工职业规划范文
2014/01/21 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
专题组织生活会方案
2014/06/15 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
golang的文件创建及读写操作
2022/04/14 Golang
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript