摘要：基于構(gòu)建的工程篇上一篇基于構(gòu)建的工程一篇里我們已經(jīng)成功構(gòu)建了整個(gè)項(xiàng)目的打包配置。不同的模塊之間都會(huì)有標(biāo)識(shí)來(lái)標(biāo)志，所以不會(huì)說(shuō)存在干擾和污染的問(wèn)題。但是對(duì)于我這個(gè)重構(gòu)的項(xiàng)目，就會(huì)有麻煩要改寫的文件有太多了。然而還有一種情況。

??上一篇基于webpack構(gòu)建的angular 1.x 工程（一）webpack篇里我們已經(jīng)成功構(gòu)建了整個(gè)項(xiàng)目的打包配置。接下來(lái)我們要繼續(xù)讓angular在工程里跑起來(lái)。

之前的工程由于是用gulp打包的，具體原理我不太懂，不過(guò)貌似會(huì)把所有的js自動(dòng)注入到index.html中。由于js很多，所以為了不互相干擾，產(chǎn)生全局變量污染的問(wèn)題，它里面所有angular都是用立即執(zhí)行函數(shù)表達(dá)式（IIFE）來(lái)寫的：

(function(){
    "use strict";

    angular.module("app.core",[ 
        "ngCookies",
        "angular-cache"
    ]);
})();

??這樣的寫法在webpack是不必要的了，webpack是根據(jù)js之間的依賴關(guān)系來(lái)加載打包項(xiàng)目的。不同的模塊之間webpack都會(huì)有標(biāo)識(shí)來(lái)標(biāo)志，所以不會(huì)說(shuō)存在干擾和污染的問(wèn)題。那我們應(yīng)該怎么寫呢？要寫成AMD/CMD規(guī)范形式的。為了方便理解，我們把立即執(zhí)行函數(shù)表達(dá)式去掉，改成這樣的：

const ngCookies = require("angular-cookies")
const ngCache = require("angular-cache")
module.exports = angular.module("app.core",[ 
                         ngCookies,
                         ngCache
                     ]);

??這個(gè)是符合webpack要求的寫法。首先先引入我們需要的模塊，然后編寫我們的模塊，最后輸出我們要暴露給外部調(diào)用的接口。于是我就把所有IIFE都改成了這種形式。

接下來(lái)問(wèn)題就來(lái)了，在同一個(gè)angular應(yīng)用模塊（module）中，各個(gè)控制器（controller）、過(guò)濾器（filters）、服務(wù)（services）等之間都是并列的兄弟關(guān)系，都是從屬于模塊。那我們應(yīng)該來(lái)處理這些關(guān)系呢？經(jīng)過(guò)查閱過(guò)別人的項(xiàng)目之后，我發(fā)現(xiàn)其實(shí)有兩種寫法：

把各個(gè)從屬的具體方法都寫成一個(gè)模塊，然后在模塊聲明時(shí)進(jìn)行引入并聲明，就像這樣：

main.controller.js

module.exports =function mainCtrl($scope, $http, $stateParams, $state, $rootScope, $filter) {
    // your controller goes here
}

index.js

angular.module("app",[])
    .controller("mainCtrl",  [$scope, $http, $stateParams, $state, $rootScope, $filter,require("./main.controller")]);

??這樣的其實(shí)也可以輸出一個(gè)數(shù)組，像這樣：

main.controller.js

module.exports =[[$scope, $http, $stateParams, $state, $rootScope, $filter, function mainCtrl($scope, $http, $stateParams, $state, $rootScope, $filter) {
    // your controller goes here
}]

??相對(duì)應(yīng)的，主要入口要這樣寫：

index.js

angular.module("app",[])
    .controller("mainCtrl",  require("./main.controller"));

??這樣的寫法適合從頭開始的項(xiàng)目，好處是分的比較清晰。
但是對(duì)于我這個(gè)重構(gòu)的項(xiàng)目，就會(huì)有麻煩：要改寫的文件有太多了。
這么麻煩，我只能拋棄這種方式。

每個(gè)模塊都直接輸出的是模塊聲明，然后只要把這個(gè)文件引入即可。
??熟悉angular的都知道，angular在整個(gè)應(yīng)用中其實(shí)一個(gè)全局定義的對(duì)象。

每個(gè)模塊在angular里注冊(cè)之后，都會(huì)在angular里找得到。
這樣的話，只要確保運(yùn)行下面這段代碼即可：

angular.module("app")
    .controller("mainCtrl",  [$scope,mainCtrl($scope){
      // your controller goes here
    }]);

??也就是說(shuō)，我只要引用了這段代碼，也算把這段代碼運(yùn)行了。
那這樣的我就可以這樣寫：

main.controller.js

module.exports = angular.module("app")
    .controller("mainCtrl",  [$scope,mainCtrl($scope){
      // your controller goes here
    }]);

index.js

angular.module("app",[])
require("./main.controller")

??在main.controller.js我直接輸出的是angular聲明app模塊的controller，然后在index.js定義模塊之后,把這個(gè)文件引入之后，就相當(dāng)于同時(shí)聲明了這個(gè)controller，免去大量改動(dòng)代碼的麻煩。不過(guò)另一個(gè)問(wèn)題出現(xiàn)了：我這里雖然免去了大量改動(dòng)代碼的麻煩，但是我那么多的controller，真的要一一寫路徑來(lái)引用嗎？這樣還是麻煩啊。不要驚慌。webpack已經(jīng)預(yù)想到你這有這個(gè)問(wèn)題了，特意寫了一個(gè)可以引用大量文件的方法給你：require.context。這個(gè)方法可以讓你查詢指定路徑的指定文件類型，然后引用進(jìn)來(lái)。我們這里由于已經(jīng)分類放好了，所有的controller都放在/app/module目錄下面，因此查找也是輕而易舉的事。所以我們的index.js可以寫成這樣：

module.exports = angular.module("app",[]);

//把所有js文件引入
function importAll (r) {
    r.keys().forEach(r);
}
importAll(require.context("./", true, /.js$/));

??這樣就解決了那些controller，filters等的問(wèn)題。具體require.context的用法[參考這里]()

??當(dāng)我們往我們的模塊注入其他模塊（自己寫的或者angular插件）的時(shí)候，這個(gè)環(huán)節(jié)也有些要注意的地方。
??首先，我們知道，angular注入其他模塊的時(shí)候，其實(shí)只需要寫注入模塊的名字就可以了，angular可以自行去尋找相應(yīng)的模塊。這樣的話，我們像上面那樣寫的模塊聲明，直接輸出其實(shí)會(huì)有問(wèn)題：

app.core.module.js

module.exports = angular.module("app.core",[])

??這里其實(shí)輸出的是angular的模塊，并不是模塊的名字。如果我們直接引用的話，像這樣：

index.js

var appCore = require("./modules/appCore.module.js")
module.exports = angular.module("app",[appCore]);

??這樣的話，angular就會(huì)報(bào)錯(cuò)：

Error: [ng:areq] Argument "module" is not a function, got Object

??要解決這個(gè)問(wèn)題其實(shí)很簡(jiǎn)單，只要調(diào)用angular的.name方法就可以了，所以上面可以改寫成這樣：

app.core.module.js

module.exports = angular.module("app.core",[]).name

??或者這樣改：

index.js

var appCore = require("./modules/appCore.module.js")
module.exports = angular.module("app",[appCore.name]);

??兩種方法選一個(gè)執(zhí)行即可。

??其實(shí)如果是插件的話，你在npm安裝的插件一般都不用擔(dān)心這個(gè)問(wèn)題，畢竟人家早就想到會(huì)有這個(gè)問(wèn)題了。但是如果是其他途徑弄來(lái)的話，這個(gè)就復(fù)雜了。

??上面提到的是插件注入可能會(huì)遇到的問(wèn)題之一。然而還有一種情況。
這種情況就是插件也使用了IIFE（立即執(zhí)行函數(shù)表達(dá)式）。聽起來(lái)就很煩。自己的代碼，自己知道怎么寫的，所以改起來(lái)不會(huì)怎么出問(wèn)題，但是別人的代碼的話就不一定了。為了避免錯(cuò)誤，我選擇不改動(dòng)插件的代碼。而是，直接在打包的時(shí)候分開打包，然后直接注入的時(shí)候?qū)懮喜寮旨纯梢宰⑷氤晒?。詳?xì)可以看我的webpack配置。

以上就是用webpack打包angular 1.x 的時(shí)候?qū)慳ngular所需要注意的地方。如果想看webpack的配置可以查看我前一篇文章：

基于webpack構(gòu)建的angular 1.x 工程（一）webpack篇

用于參考的一位前輩的類似項(xiàng)目,讓大家也參考一下：
https://github.com/IamBusy/webpack-angular

想看詳細(xì)代碼，可以訪問(wèn)我的項(xiàng)目地址
https://github.com/homerious/angular-ionic-webpack

有什么問(wèn)題或者不對(duì)的地方歡迎指出，謝謝閱讀！

本文原創(chuàng)，未經(jīng)授權(quán)請(qǐng)勿轉(zhuǎn)載。