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

项目中使用了AngularJS框架，RequireJS用于异步模块加载(AMD)。文件合并压缩时，会遇到一些坑，有些刚解决，原因不明白。

坑1中的路径。build.js必须与main.js中的一致

build.js是r.js使用的配置文件，main.js是RequireJS的主文件。在合并压缩的时候，还需要在build.js文件中写路径，和main.js一样，不知道为什么不能在main中识别require.config的路径，以免合并的时候复制路径(我在build.js中尝试过没有路径的合并)。(-_-!)

2.一些依赖库需要在合并之前写下整个相对路径。

在项目中，我使用了一个名为layer的第三方库(这个库是用requireJS define编写的)，一开始只用于开发，配置路径后只需要一个短名字(define的时候就要看了)。但是，在合并时，建议文件不存在(因为缩写直接用于拼写文件地址)。无奈之下，只能修改这个库的使用方法，所有使用这个库的人都会写出整个相对路径。这个时候发展合并没有错。

3.它可以在合并后运行，但不能在压缩后运行。

这是最严重的问题，最严重的问题，最严重的问题。文件合并压缩后，使用文件时，AngularJS运行异常，总是报告模块初始化失败，由于：错误：[$ injector : unprer]未知提供程序3360e，导致无法实例化模块common，如下图所示。

一个关键点是它可以不用压缩就可以使用。一旦它被压缩(使用默认压缩)，它将报告一个错误。所以，有些事情在思考的时候一定要“粉碎”。网上有些文章说要写AngularJS cntroller，directive等。下面，使用的服务由字符串定义。

common module . controller(' broswerctrl '，['$ scope '，' $ SCE '，function ($ scope，$ SCE){但是我的整个应用程序都是这样定义的，没有机会往里面注入错误。最后，无奈之下，我们只能将mangle:配置为false，而不会混淆变量名。这样做之后，合并和压缩的文件就可以正确使用了！

PS:简单来说就是合并压缩就可以了，但是变量名不能混淆(总感觉怪怪的)，感觉暂时没有解决办法。

4.第二层require在合并时，不能合并。

例如，如果您以这种方式在mian.js中加载模块，您会发现第二层的需求没有被合并。

require([ 'COMMON']，function(){ require([ 'angular '，' LOGIN' ]，function(angular){ //.});});此时，您需要在build.js中添加find nested dependencies 3360 true，然后第二层将被合并。

巩固准备

1.安装nodejs。

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

2.下载r.js

R.js与requirejs模块协作来组合和压缩文件。

简单配置

最好在配置文件中编写一个build.js，如下所示：

({ base URL : }./'，路径： {//.}，shim3360 {//.}，优化： ' uglify2 '，uglife 23360 { mangle 3360 false//false不会混淆变量名}，Finesteddependencies : true，name :' js/main '，out: './js/main-build . js ' })以下是一些关键属性：

所有模块(通常是js)都相对于这个路径存在。

优化：优化脚本文件的方式，有以下五种取值方式。

Uglify:(默认)用UglifyJS压缩。Uglify2:由UglifyJS2(2.1.2)压缩。闭包：使用谷歌的Closure Compiler简单优化模式压缩文件，只有使用Java作为优化工具时才有效。Closure.keepLines:与Closure参数相同，只是保留了换行符。无：无压缩。FindNestedDependencies:在require()中查找require的依赖项或定义调用。

PS:配置属性很多，我们会详细讨论。配置文件后，执行命令合并压缩。

noder.js-obuild.js摘要。

RequireJS模块的合并和压缩比较简单，但是涉及到AngularJS，在压缩方面存在一些问题，目前还没有找到更好的方法。

这是本文的详细内容，希望对大家的学习有所帮助。