如何工程化開發大型angular2項目（上篇）
前請提要
目前前端項目越來越復雜，管理一個前端項目需要考慮的方面越來越多，例如工具選擇、項目構建、代碼自動review工具、代碼打包上線、開發生產環境分離、項目結構管理以及第三庫引入管理等等之類問題。所以下面是我開發angular2項目時遇到的一些問題以及自己的一些解決方案以及項目管理的思路。這些內容將會以一個系列展開。
項目構建篇
angular2官方提供ng cli構建工具，但是投入使用后發現并不是符合我們需求。因為我們之前項目是基于gulp整套工作流，所以一直在尋找與gulp相結合的ng2案例。后來找到一個angular-seed項目，于是我將該項目設立為種子項目，依據該種子項目我們開發了7、8個angular2項目。下面簡單介紹一下如何利用種子庫創建衍生庫，只要種子庫保持更新，其他庫可以同步保持更新.
建立種子庫
上面的圖畫得比較爛，我還是來好好解釋一下。首先我們得有一個主心庫，這個庫十分重要，里面沒有業務邏輯的代碼，主要是平時開發時所需要的所有腳本，以及npm的一些基本依賴。另外一些共用組件，共用邏輯代碼（例如登錄驗證等等）。主心庫創
立完后，我們需要建立一個upstream的遠端指向angular-seed項目
git remote add upstream https://github.com/mgechev/angular-seed.git
git fetch upstream
git merge upstream/master
平時我們想要更新主倉庫時，只要git pull一下upstram遠端，就可以保持最新了。如果不想人工手動去更新的化可以交給jenkins定時去更新，這樣主心倉庫永遠是最新的了。
創建衍生庫
因為我們所有項目圍繞主心庫而衍生出來的，所以衍生庫和主心庫的關心和angular-seed關系一致。我們指定我們衍生庫的遠端upstream為我們的主心庫，這樣只要主心庫是最新的，這樣所有衍生庫都可以保持同步更新。可以享受主心庫提供的共用配置和
業務邏輯。看上去過程比較繁瑣，其實只需要將整個操作過程的指令集合到bash腳本中，執行腳本是指定參數名為你的項目名稱。這樣快速就可以構建一個angular2項目，所以整套流程適合有復雜業務的項目。
git remote add upstream git@192.168.1.1:/git/main-base
git fetch upstream
git merge upstream/master
項目開發篇
既然我們構建完項目后，那么馬上開工吧。隨著前端項目越來越復雜，里面配置文件越來越多。因為開發環境和生產環境需要調用服務端接口地址又是不一樣的，像我開發微信項目的，開發環境用測試的appid和生產環境的appid也是不一樣的。情況更嚴重的是我們每個客戶都有自己獨立的配置信息（所以開始考慮多租戶模式，不然下去是大坑）。理想情況下：
gulp build.dev --color --env-config dev
執行上述命令，就是啟動開發dev環境的配置。利用yargs這個node工具去接收我們傳遞過去的參數，以此來區分開是開發模式下還是prod模式下。下面貼一段代碼舉例一下：
import { argv } from 'yargs';
...
export function templateLocals() {
// 這里就是我們通過env-config變量獲取參數
const configEnvName = argv['env-config'] || argv['config-env'] || 'dev';
const configPath = Config.getPluginConfig('environment-config');
const baseConfig = getConfig(configPath, 'base');
// 依據dev和prod以及對應的路徑獲取對應的配置文件
const config = getConfig(configPath, configEnvName);
if (!config) {
throw new Error('Invalid configuration name');
}
return Object.assign(Config, {
ENV_CONFIG: JSON.stringify(Object.assign(baseConfig, config))
});
}
// 具體代碼可以克隆angular-seed去查看
另外angular2提供enableProdMode接口能夠優化打包出來的代碼，但是我們開發時是不需要用到該接口如何去分離開來呢？gulp有個好插件，完美解決該問題，gulp-template。我們只要在我們
代碼中加入類似<%= BUILD_TYPE %>，這樣就可以賦值給BUILD_TYPE，我們可以合理得去控制。
import { enableProdMode } from '@angular/core';
...
if (String('<%= BUILD_TYPE %>') === 'prod') { enableProdMode(); }
關于開發配置十分細碎，所以不做詳述，可以日后咨詢。
下篇預告
下篇會涉及項目目錄結構管理，以及angular2在移動端開發的經驗，項目打包上線的經驗。
PS： 正在找工作，有意請加我QQ： 846432362。
