亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2016年01月09日 18:15:43   作者:海角在眼前  
小心!AngularJS結(jié)合RequireJS做文件合并壓縮的那些坑,大家在做文件合并壓縮的時候一定要注意,感興趣的朋友可以參考一下

在項目使用了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. 某些依賴庫需要寫整個相對路徑才能做合并。

在項目里, 我使用一個叫l(wèi)ayer的第三方庫(庫是以requireJS define寫的),一開始只做開發(fā)時候,在paths配置了路徑后,使用此庫只需要用個簡稱(define依賴時候)。 但在做合并時候,竟然提示文件不存在(因為直接拿簡稱去拼文件地址了),無奈之下只能修改這個庫的使用辦法,全部使用到這個庫的都寫整個相對路徑,這個時候開發(fā)和做合并才沒有錯。

3. 合并之后可以運行,加上壓縮就不可以。

這個是最嚴重問題,最嚴重問題,最嚴重問題。在文件合并壓縮后,使用文件時候,AngularJS運行就不正常了,總是報模塊初始化失敗,Failed to instantiate module common due to: Error: [$injector:unpr] Unknown provider: e,如下圖。

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

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

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

PS:簡單說法就是,合并壓縮可以,變量名不能混淆(總覺得怪怪的),感覺問題暫時無解。

4. 第二層的require,做合并的時候,是合并不出來。

例如在mian.js里面這樣加載模塊,在合并時候會發(fā)現(xiàn)第二層的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"
})

這里就講幾個關(guān)鍵屬性:

baseUrl:所有的模塊(般就是js)都相對于這個路徑存在。

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

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

findNestedDependencies:尋找require()里面的require或define調(diào)用的依賴。

PS:配置屬性還有很多,就不一細細說了。當文件配置好后,就執(zhí)行命令合并壓縮

node r.js -o build.js

總結(jié)

RequireJS模塊的合并壓縮還是比較簡單的,但是遇到AngularJS,在壓縮方面就有些問題了,目前沒找到什么更好辦法。

以上就是本文的詳細內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評論