小心！AngularJS結合RequireJS做檔案合并壓縮的那些坑_javascript技巧

在項目使用了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 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，在壓縮方面就有些問題了，目前沒找到什麼更好辦法。

以上就是本文的詳細內容，希望對大家的學習有所協助。