小心！ AngularJS結合RequireJS做檔案合併壓縮的那些坑

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

WBOY

發布： 2016-05-16 15:20:51

原創

1184 人瀏覽過

在專案使用了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種取值方式。