0、前言
當(dāng)一個(gè)公司有多個(gè)開發(fā)團(tuán)隊(duì)時(shí)，我們可能會(huì)遇到這樣一些問題：
1.技術(shù)選項(xiàng)雜亂，大家各玩各
2.業(yè)務(wù)重復(fù)度高，各種通用api，登錄注銷，權(quán)限管理都需要重復(fù)實(shí)現(xiàn)（甚至一個(gè)團(tuán)隊(duì)都需要重復(fù)實(shí)現(xiàn)）
3.業(yè)務(wù)壁壘，業(yè)務(wù)之間的互通變得比較麻煩
4.部署方式復(fù)雜，多個(gè)域名（或IP地址）訪問，給用戶造成較大的記憶難度
5.多套系統(tǒng)，風(fēng)格難以統(tǒng)一
6.等等...
當(dāng)然，解決方式有不少。以下就來講解下我們這邊的一種解決方案。
1、思路
Angualr
Angular（注：非AngularJS） 是流行的前端 MVVM 框架之一，配合 TypeScript，非常適合用來做后臺(tái)管理系統(tǒng)。由于我們曾今的一套 Angularjs 開發(fā)框架，我們繼續(xù)選擇 Angular 來進(jìn)行實(shí)現(xiàn)，并盡可能的兼容 AngularJS 的模塊。
SPA
選 SPA 還是多頁？多余 Mvvm 來說，多頁并不是標(biāo)配。而且多頁開發(fā)中，我們勢必會(huì)關(guān)注更多的內(nèi)容，包括通用header，footer，而不僅僅是頁面的核心內(nèi)容。
模塊化
為什么要模塊化呢？當(dāng)有多個(gè)團(tuán)隊(duì)開發(fā)時(shí)（或者項(xiàng)目較大時(shí)），我們希望各個(gè)團(tuán)隊(duì)開發(fā)出來的東西都是 模塊（不僅限于JS模塊），這樣可以讓我們獨(dú)立發(fā)布、更新、刪除模塊，也能讓我們的關(guān)注點(diǎn)集中在特定模塊下，提高開發(fā)效率和可維護(hù)性。
平臺(tái)化
我們需要有一個(gè)運(yùn)行平臺(tái)（Website站點(diǎn)），允許在里面運(yùn)行指定的模塊。這樣就可以實(shí)現(xiàn)單一入口，也容易實(shí)現(xiàn)通用邏輯，模塊共享機(jī)制等等。
兼容 AngularJS 模塊
在考慮將框架切換到 Angular 時(shí)，我們無可避免的會(huì)遇到如何兼容當(dāng)前已有模塊的問題。大致可選的方案如下：
1.參考 AngualrJS -> Angular 官方升級(jí)指南，一步步將模塊切換為 Angular 的實(shí)現(xiàn)。（工作量大，需要開發(fā)團(tuán)隊(duì)調(diào)整很多東西）
2.iframe嵌入，會(huì)有一定的體驗(yàn)差異，但對開發(fā)團(tuán)隊(duì)來說，基本無縫升級(jí)，也不需要做什么改動(dòng)。（無疑，我們選擇了這套方案）
模塊打包
我們需要將單個(gè)的模塊打包為資源包，進(jìn)行更新。這樣才能做到模塊獨(dú)立發(fā)布，及時(shí)生效。
CSS沖突
在大型 SPA 中，CSS沖突是很大的一個(gè)問題。我們期望通過技術(shù)手段，能夠根據(jù)當(dāng)前使用的模塊，加載和卸載CSS。
跨頁面共享數(shù)據(jù)
由于涉及到iframe兼容舊有模塊，我們無可避免，需要考慮跨窗口的頁面共享。
公共模塊
當(dāng)一個(gè)團(tuán)隊(duì)的模塊較多時(shí)，就會(huì)有一些公共的東西被抽取出來，這個(gè)過程，框架是無法知道的，所以這個(gè)時(shí)候，我們就需要考慮支持公共模塊。（模塊之間也有依賴關(guān)系）
3、實(shí)現(xiàn)
基于以上的一些思考，我們首先需要實(shí)現(xiàn)一個(gè)基礎(chǔ)的平臺(tái)網(wǎng)站，這個(gè)沒什么難度，直接用 Angular 實(shí)現(xiàn)即可。有了這一套東西，我們的登錄注銷，基本的菜單權(quán)限管理，也就實(shí)現(xiàn)了。
在這個(gè)基礎(chǔ)之上，我們也能實(shí)現(xiàn)公共服務(wù)、公共組件了（封裝一系列常用的玩意）。
如何模塊化？如何打包？
注意：此模塊并非Angular本身的模塊。 我們通過約定，在 modules/ 下的每一個(gè)目錄都是一個(gè)業(yè)務(wù)模塊。一個(gè)業(yè)務(wù)模塊一般會(huì)包含，靜態(tài)資源、CSS以及JS。根據(jù)這個(gè)思路，我們的打包策略就是：遍歷 modules/ 的所有目錄，對每一個(gè)目錄進(jìn)行單獨(dú)打包（webpack多entry打包+CSS抽?。硗馐褂?gulp 來處理相關(guān)的靜態(tài)資源（在我看來，gulp才是構(gòu)建工具，webpack是打包工具，所以混合使用，物盡其用）。
一般來說，webpack 會(huì)把所有相關(guān)依賴打包在一起，A、B 模塊都依賴了 @angular/core 識(shí)別會(huì)重復(fù)打包，而且框架中，也已經(jīng)打包了 @angular 相關(guān)組件。這個(gè)時(shí)候，常規(guī)的打包配置就不太合適了。那該如何做呢？
考慮到 Angular 也提供了 CDN 版本，所以我們將 Angular 的組件通過文件合并，作為全局全量訪問，如 ng.core、ng.common 等。
既然這樣，那我們打包的時(shí)候，就可以利用 webpack 的 externals 功能，把相關(guān)依賴替換為全局變量。
重慶分公司
重慶分公司
externals: [{
'rxjs': 'Rx',
'@angular/common': 'ng.common',
'@angular/compiler': 'ng.compiler',
'@angular/core': 'ng.core',
'@angular/http': 'ng.http',
'@angular/platform-browser': 'ng.platformBrowser',
'@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
'@angular/router': 'ng.router',
'@angular/forms': 'ng.forms',
'@angular/animations': 'ng.animations'
}
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
