快捷導(dǎo)航

小心！AngularJS結(jié)合RequireJS做文件合并壓縮的那些坑

更新時(shí)間：2016年01月09日 18:15:43 作者：海角在眼前

小心！AngularJS結(jié)合RequireJS做文件合并壓縮的那些坑，大家在做文件合并壓縮的時(shí)候一定要注意，感興趣的朋友可以參考一下

在項(xiàng)目使用了AngularJS框架，用RequireJS做異步模塊加載（AMD），在做文件合并壓縮時(shí)，遇到了一些坑，有些只是解決了，但不明白原因。

那些坑
1. build.js里面的paths必須跟main.js里面的保持一致。

這個(gè)build.js就是r.js使用的配置文件，而main.js就是RequireJS的main文件。在合并壓縮時(shí)候，build.js文件里面也需要寫paths，而且還是跟main.js一樣，我很奇怪為什么就不能識(shí)別main里面的require.config的paths，省得合并的時(shí)候還要將paths拷貝過來（我試過build.js里面沒有paths，是不能合并的）。（-_-!!!）

2. 某些依賴庫(kù)需要寫整個(gè)相對(duì)路徑才能做合并。

在項(xiàng)目里，我使用一個(gè)叫l(wèi)ayer的第三方庫(kù)（庫(kù)是以requireJS define寫的），一開始只做開發(fā)時(shí)候，在paths配置了路徑后，使用此庫(kù)只需要用個(gè)簡(jiǎn)稱（define依賴時(shí)候）。但在做合并時(shí)候，竟然提示文件不存在（因?yàn)橹苯幽煤?jiǎn)稱去拼文件地址了），無奈之下只能修改這個(gè)庫(kù)的使用辦法，全部使用到這個(gè)庫(kù)的都寫整個(gè)相對(duì)路徑，這個(gè)時(shí)候開發(fā)和做合并才沒有錯(cuò)。

3. 合并之后可以運(yùn)行，加上壓縮就不可以。

這個(gè)是最嚴(yán)重問題，最嚴(yán)重問題，最嚴(yán)重問題。在文件合并壓縮后，使用文件時(shí)候，AngularJS運(yùn)行就不正常了，總是報(bào)模塊初始化失敗，Failed to instantiate module common due to: Error: [$injector:unpr] Unknown provider: e，如下圖。

很關(guān)鍵的一個(gè)點(diǎn)就是，不壓縮可以用，一旦壓縮了（用了默認(rèn)的壓縮），使用就會(huì)報(bào)錯(cuò)。所以思考必定某些東西被“壓壞”了，網(wǎng)上某些文章都說是需要下面這樣寫AngularJS cntroller、directive等，使用的服務(wù)用字符串定義。

commonModule.controller( "broswerCtrl" ,["$scope" ,"$sce" , function ($scope,$sce){

可是我的整個(gè)應(yīng)用就是這樣定義，并沒有給它注入錯(cuò)誤的機(jī)會(huì)。最后在無奈之下，就只能配置mangle: false，不混淆變量名，這樣做后，合并壓縮的文件就能正確使用了！?。?/p>

PS：簡(jiǎn)單說法就是，合并壓縮可以，變量名不能混淆（總覺得怪怪的），感覺問題暫時(shí)無解。

4. 第二層的require，做合并的時(shí)候，是合并不出來。

例如在mian.js里面這樣加載模塊，在合并時(shí)候會(huì)發(fā)現(xiàn)第二層的require并沒有被合并到。

require([ "COMMON"], function(){
  require([ "angular", "LOGIN" ], function(angular){
   //....
  });
});

這時(shí)需要在build.js加findNestedDependencies: true, 這時(shí)才會(huì)合并第二層。

合并準(zhǔn)備

1、安裝nodejs

文件合并壓縮基于nodejs，所以先安裝nodejs。

2、下載r.js

r.js配合requirejs模塊寫法對(duì)文件進(jìn)行合并，壓縮。

簡(jiǎn)單配置

配置文件最好寫一個(gè)build.js，如下：

({
  baseUrl:"../",
  paths: {
   //...
  },
  shim: {
   //...
  },
  optimize: "uglify2",
  uglify2: {
  mangle: false //false 不混淆變量名
  },
  findNestedDependencies: true,
  name: "js/main",
  out: "../js/main-built.js"
})

這里就講幾個(gè)關(guān)鍵屬性：

baseUrl：所有的模塊（般就是js）都相對(duì)于這個(gè)路徑存在。

optimize：優(yōu)化腳本文件的方式，有下面5種取值方式。

uglify：（默認(rèn)）用UglifyJS壓縮。
uglify2：用UglifyJS2（ 2.1.2+）壓縮。
closure：使用Google's Closure Compiler 簡(jiǎn)單優(yōu)化模式壓縮文件, 僅在優(yōu)化工具使用Java有效。
closure.keepLines：跟closure參數(shù)一樣, 只不過保留換行符。
none：不做壓縮。