小心!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 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
基于webpack.config.js 参数详解
Mar 20 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 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 引用(&)详解
2009/11/20 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
javascript回调函数详解
2018/02/06 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
python3.6实现学生信息管理系统
2019/02/21 Python
dpn网络的pytorch实现方式
2020/01/14 Python
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
秦始皇兵马俑导游词
2015/02/02 职场文书
电气工程师岗位职责
2015/02/12 职场文书
校园新闻稿范文
2015/07/18 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
java实现对Hadoop的操作
2021/07/01 Java/Android