AngularJS分別RequireJS做文件合并壓縮的那些坑

小心！AngularJS合并RequireJS做文件離開壓縮的那些坑

小心！AngularJS合并RequireJS做文件離開壓縮的那些坑，各人正在做文件離開壓縮的時辰一定要注意，感樂趣的網(wǎng)友可以參考一下
正在項目運用了AngularJS框架，用RequireJS做異步模塊加載（AMD），正在做文件離開壓縮時，遇到了一些坑，有些只是搞定了，但不大白原因。

那些坑
1. build.js內(nèi)里的paths必須跟main.js內(nèi)里的保持等同。

這個build.js便是r.js運用的設(shè)置文件，而main.js便是RequireJS的main文件。正在離開壓縮時辰，build.js文件內(nèi)里也必要寫paths，并且仍是跟main.js同樣，我很奇特為甚么就不克不及識別main內(nèi)里的require.config的paths，以免離開的時辰還要將paths拷貝過來（我試過build.js內(nèi)里沒有paths，是不克不及離開的）。（-_-!!!）

2. 某些依賴庫必要寫整個絕關(guān)于門路才氣做離開。

正在項目里， 我運用一個叫l(wèi)ayer的第三方庫（庫因而requireJS define寫的），一起頭只做開拓時辰，正在paths設(shè)置了門路后，運用此庫只必要用個簡稱（define依賴時辰）。 但正在做離開時辰，竟然提示文件不存正在（因為間接拿簡稱去拼文件地點了），無法之下只能修改這個庫的運用辦法，全數(shù)運用到這個庫的都寫整個絕關(guān)于門路，這個時辰開拓和做離開才沒有錯。

3. 離開以后可以運轉(zhuǎn)，加之壓縮就不行以。

這個是最緩和標(biāo)題，最緩和標(biāo)題，最緩和標(biāo)題。正在文件離開壓縮后，運用文件時辰，AngularJS運轉(zhuǎn)就不個別了，老是報模塊初始化得勝，F(xiàn)ailed to instantiate module co妹妹on due to: Error: [$injector:unpr] Unknown provider: e，以下圖。

很關(guān)頭的一個點便是，不壓縮可以用，一旦壓縮了（用了默認(rèn)的壓縮），運用就會報錯。以是斟酌一定某些工具被“壓壞”了，網(wǎng)上某些文章都說是必要前面多么寫AngularJS cntroller、directive等，運用的辦事用字符串概念。

co妹妹onModule.controller( "broswerCtrl" ,["$scope" ,"$sce" , function ($scope,$sce){

不過我的整個運用便是多么概念，并無給它注入過失的時機。起初正在無法之下，就只能設(shè)置mangle: false，不混雜變量名，多么做后，離開壓縮的文件就可以準(zhǔn)確運用了?。?！

PS：龐雜說法便是，離開壓縮可以，變量名不克不及混雜（總覺得怪怪的），覺得標(biāo)題暫時無解。

4. 第二層的require，做離開的時辰，是合其實不進(jìn)來。

比喻正在mian.js內(nèi)里多么加載模塊，正在離開時辰會看見第二層的require并無被離開到。

require([ "CO妹妹ON"], function(){
  require([ "angular", "LOGIN" ], function(angular){
   //....
  });
});

這時分必要正在build.js加findNestedDependencies: true, 這時分才會離開第二層。

離開籌備

一、安放nodejs

文件離開壓縮基于nodejs，以是先安放nodejs。

二、下載r.js

r.js獨特requirejs模塊寫法關(guān)于文件舉辦離開，壓縮。

龐雜設(shè)置

設(shè)置文件最佳寫一個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）都絕關(guān)于付這個門路存正在。

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

uglify：（默認(rèn)） 用UglifyJS壓縮。

uglify2： 用UglifyJS2（ 2.1.2+）壓縮。

closure： 運用谷歌's Closure Compiler 龐雜優(yōu)化情勢壓縮文件, 僅正在優(yōu)化貨色運用Java有用。

closure.keepLines：跟closure參數(shù)同樣, 只可是保留換行符。

none： 不做壓縮。
findNestedDependencies：探究require()內(nèi)里的require或許define調(diào)用的依賴。

PS：設(shè)置屬性另有不少，就紛歧細(xì)細(xì)說了。當(dāng)文件設(shè)置好后，就實施號召離開壓縮

node r.js -o build.js
總結(jié)

RequireJS模塊的離開壓縮仍是有點龐雜的，可是遇到AngularJS，正在壓縮方面就有些標(biāo)題了，今朝沒找到甚么更好辦法。

以上便是本文的詳細(xì)內(nèi)容，但愿關(guān)于各人的深造有所幫助。