摘要：之后，在本地目錄生成代碼并且安裝項(xiàng)目依賴的包，最后將本次初始化生成的所有代碼自動提交到遠(yuǎn)程倉庫。按照城市評選，分別評選明日之子僅限男性參加和閃亮女神僅限女性參加。

背景: 隨著開發(fā)團(tuán)隊(duì)規(guī)模不斷發(fā)展壯大，在人員增加的同時也帶來了協(xié)作成本的增加，業(yè)務(wù)項(xiàng)目越來越多，類型也各不相同。常見的類型有組件類、活動類、基于React+redux的業(yè)務(wù)項(xiàng)目、RN項(xiàng)目、Node.js項(xiàng)目等等。如果想要對每個項(xiàng)目進(jìn)行一些規(guī)范的約束比如Git提交規(guī)范、Javascript規(guī)范簡直難于登天。所有的這些，只因?yàn)槿鄙僖粋€好用的工程化工具。從項(xiàng)目創(chuàng)建、開發(fā)、構(gòu)建、代碼規(guī)范檢查到最終項(xiàng)目上線，通過CLI可以提升效率，同時保障開發(fā)規(guī)范的實(shí)施。

關(guān)鍵點(diǎn)在于package.json里面的bin字段。模塊全局安裝，對于類unix系統(tǒng)，在/usr/local/bin目錄創(chuàng)建軟鏈接；對于windows系統(tǒng)，在C:UsersusernameAppDataRoaming pm目錄創(chuàng)建軟鏈接。
模塊局部安裝，會在項(xiàng)目內(nèi)的./node_modules/.bin目錄創(chuàng)建軟鏈接。

隨著前端工程的不斷演進(jìn)，一方面工程變得日趨復(fù)雜，同時對規(guī)范和質(zhì)量的訴求在不斷增加。現(xiàn)代化web工程應(yīng)該包含以下幾個階段：初始化、開發(fā)、構(gòu)建、檢查、發(fā)布。如下圖所示：

項(xiàng)目拷貝存在的問題顯而易見，大致有以下三個方面：

容易出錯；一旦某個關(guān)鍵文件拷貝丟失或者錯誤，很可能需要耗費(fèi)半天到一天的時間排查環(huán)境問題。

不同場景下對目錄結(jié)構(gòu)要求不同；平時開發(fā)過程中，工程通常會分為運(yùn)營活動、Hybrid業(yè)務(wù)、入口級別的項(xiàng)目（對性能和體驗(yàn)有極致和苛刻的要求）。需要基于RN或者Node.js的首屏直出，還有常用的業(yè)務(wù)組件等的開發(fā)。

新的Feature和BugFix難以同步；某個同學(xué)開發(fā)過程中增加的新方法或者解決的bug很難傳遞給其它同學(xué)并且沉淀成經(jīng)驗(yàn)積累下來。

社區(qū)里面提供了完美的Yeoman解決方案，它是為了自動化項(xiàng)目的創(chuàng)建而生。Yeoman創(chuàng)建項(xiàng)目包括以下幾個階段：

initializing: 初始化一些狀態(tài)之類的，通常是和用戶輸入的 options 或者 arguments 打交道

prompting: 和用戶交互的時候（命令行問答之類的）調(diào)用

configuring: 保存配置文件（如 .babelrc 等）

writing: 生成模板文件

install: 安裝依賴

end: 結(jié)束部分，初始代碼自動提交

我們只需要繼承Yeoman的Generator類做模板定制化，基于Yeoman的腳手架設(shè)計(jì)思路應(yīng)該如下圖所示：

首先，開發(fā)者會和CLI進(jìn)行交互，開發(fā)者會告訴CLI需要創(chuàng)建哪一種類型的項(xiàng)目，CLI收到命令后。從本地已經(jīng)安裝的Yeoman腳手架里面選擇某種類型的模板。然后，CLI會調(diào)用Gitlab API在遠(yuǎn)程創(chuàng)建倉庫并且授予開發(fā)者master權(quán)限。接下來，會根據(jù)實(shí)際業(yè)務(wù)場景需要，自動化申請一些打點(diǎn)信息，常見的如離線包id，監(jiān)控告警id等等。之后，在本地目錄生成代碼并且安裝項(xiàng)目依賴的npm包，最后將本次初始化生成的所有代碼自動提交到遠(yuǎn)程Git倉庫。

基于React+redux組件化開發(fā)方式中，一個頁面或者webapp是由多個容器組件拼裝后渲染而成。

某個組件通常是由：模板、cgi數(shù)據(jù)和事件組成。理想情況下，開發(fā)和產(chǎn)品和平共處，你可以把一個組件寫成下面這個樣子，比如規(guī)則組件：

render() {
    return (
        

            

                
活動時間：
                
9月14日～9月30日
            
            

                
活動規(guī)則：
                
1、活動期間，在NOW app上錄制小視頻，上傳成功后即可參賽。
                
2、根據(jù)參賽小視頻獲得的點(diǎn)贊數(shù)進(jìn)行排行。
                
3、按照城市評選，分別評選“明日之子”（僅限男性參加）和”閃亮女神“僅限女性參加。
            
        
    );
}

咋一看，上面的寫法沒什么問題。實(shí)際確很可能是7、8次的文案修改，甚至對外入口開放后仍然要修改文案或者圖片等靜態(tài)數(shù)據(jù)。然后，你需要走代碼發(fā)布流程。

更好的解決思路是：在開發(fā)某個業(yè)務(wù)組件之前，結(jié)合以往的經(jīng)驗(yàn)，分析哪些靜態(tài)數(shù)據(jù)很可能是需要高頻次的修改。將這些高頻次修改的靜態(tài)數(shù)據(jù)抽離出來，對于萬年不變的數(shù)據(jù)則沒有必要抽出來。那么，如何將靜態(tài)數(shù)據(jù)動態(tài)化呢？

答案是： Schema First ， 開發(fā)組件之前先設(shè)計(jì)Schema，通過schema生成一個form表單，達(dá)到靜態(tài)數(shù)據(jù)和模板分離。如果使用React開發(fā)，可以基于react-jsonschema-form定制。靜態(tài)數(shù)據(jù)和模板分離之后應(yīng)該如下圖：

此處以Git commit規(guī)范為例子進(jìn)行相關(guān)改進(jìn)介紹。

良好的Git commit規(guī)范有以下優(yōu)勢：

加快Review的流程

根據(jù)Commit元數(shù)據(jù)生成Changelog

后續(xù)維護(hù)者可以知道feature被添加的原因

此處采用Google angular項(xiàng)目的提交作為參考，整理出Git commit的解決方案：

具體的提交格式要求如下：

(): 

對格式的說明如下：

type代表某次提交的類型，比如是修復(fù)一個bug還是增加一個新的feature。所有的type類型如下：

feat： 新增feature

fix: 修復(fù)bug

docs: 僅僅修改了文檔，比如README, CHANGELOG, CONTRIBUTE等等

style: 僅僅修改了空格、格式縮進(jìn)、都好等等，不改變代碼邏輯

refactor: 代碼重構(gòu)，沒有加新功能或者修復(fù)bug

perf: 優(yōu)化相關(guān)，比如提升性能、體驗(yàn)

test: 測試用例，包括單元測試、集成測試等

chore: 改變構(gòu)建流程、或者增加依賴庫、工具等

revert: 回滾到上一個版本

一鍵生成Changelog版本日志：

一次血淋淋的生產(chǎn)環(huán)境事故：2017年4月13日，騰訊高級工程師小圣在做充值業(yè)務(wù)時，修改了蘋果iap支付配置，將JSON配置增加了重復(fù)的key。代碼發(fā)布后，有小部分使用了vivo手機(jī)的用戶反饋充值頁面白屏，無法在Now app內(nèi)進(jìn)行充值。最后問題定位是：vivo手機(jī)使用了系統(tǒng)自帶的webview而沒有使用X5內(nèi)核，解析JSON時遇到重復(fù)key報(bào)錯，導(dǎo)致頁面白屏。

分析：現(xiàn)代化的瀏覽器對于JSON里面的重復(fù)key會做兼容處理，但是某些老舊的瀏覽器內(nèi)核并不會，比如此處的vivo手機(jī)，導(dǎo)致代碼直接出錯。那么，如何避免類似問題再次出現(xiàn)呢？

此處不得不提及ESLint，ESLint于2013年6月推出最新版本v4.6.0，是一款適用于Javascript和JSX的代碼規(guī)范檢查工具，相比JSLint和JSHint而言，它更加靈活，支持自定義配置、插件擴(kuò)展和配置錯誤級別。雖然接入ESLint會給團(tuán)隊(duì)的同學(xué)增加不少代碼修改的成本，但是從長遠(yuǎn)來看，收益肯定是大于付出的。

Javascript規(guī)范制定的原則：

不重復(fù)造輪子，基于eslint:recommend 配置并改進(jìn)

能夠幫助發(fā)現(xiàn)代碼錯誤的規(guī)則，全部開啟

配置不應(yīng)該依賴于某個具體項(xiàng)目，而應(yīng)盡可能的合理

幫助保持團(tuán)隊(duì)的代碼風(fēng)格統(tǒng)一，而不是限制開發(fā)體驗(yàn)

有對應(yīng)的解釋文檔

為了更好的定制和維護(hù)Javascript規(guī)范，我們創(chuàng)建了eslint的shareable config。一方面，我們覺得eslint:recommend 里面的部分配置定義的錯誤級別過于嚴(yán)格，比如代碼里面出現(xiàn)了console會導(dǎo)致校驗(yàn)錯誤，另一方面，它沒有包含ESLint的最佳實(shí)踐和其它規(guī)則。我們定義的部分規(guī)則解釋如下：

ESLint的執(zhí)行可以接入到PUSH hook里面，步驟如下：

#1, 安裝husky
$ npm install husky --save-dev

#2, 集成進(jìn)npm script
{
  "scripts": {
    "precommit": "validate-commit-msg",
    "prepush": "eslint src ./.eslintrc.js --ext ".js,.jsx""
  }
}

CLI的作用是將工程開發(fā)過程中遇到的一系列痛點(diǎn)問題連接起來，提升開發(fā)效率，同時保障規(guī)范的實(shí)施。

這里有一個非常巧妙的設(shè)計(jì)，通過使用node提供的module和vm模塊，可以通注入feflow全局變量來訪問到cli的實(shí)例。從而能夠訪問cli上的各種屬性，比如config, log和一些helper等。

 loadPlugin(path, callback) {
    const self = this;

    return fs.readFile(path).then((script) => {

      const module = new Module(path);
      module.filename = path;
      module.paths = Module._nodeModulePaths(path);

      function require(path) {
          return module.require(path);
      }

      require.resolve = function(request) {
          return Module._resolveFilename(request, module);
      };

      require.main = process.mainModule;
      require.extensions = Module._extensions;
      require.cache = Module._cache;

      // Inject feflow variable
      script = "(function(exports, require, module, __filename, __dirname, feflow){" +
          script + "});";

      const fn = vm.runInThisContext(script, path);

      return fn(module.exports, require, module, path, pathFn.dirname(path), self);
      }).asCallback(callback);
  }

命令需要以feflow.cmd.register進(jìn)行注冊，比如：

feflow.cmd.register("deps", "Config ivweb dependencies", function(args) {
    console.log(args); 
    // Plugin logic here.
});

說明：

register有3個參數(shù)，第一個是子命令名稱，第二個是命令描述說明信息，第三個是對應(yīng)的子命令執(zhí)行邏輯函數(shù)。

feflow會將命令行參數(shù)args解析成Object對象，傳遞給插件處理函數(shù)

可以通過feflow.version獲取當(dāng)前feflow的版本，feflow.baseDir 獲取feflow跟目錄（在用戶目錄下的.feflow），通過feflow.pluginDir 獲取插件目錄

通過feflow.log來進(jìn)行相關(guān)命令行日志輸出

const log = feflow.log;
log.info() ?  // 提示日志，控制臺中顯示綠色
log.debug() ? // 調(diào)試日志,  命令行增加--debug可以開啟，控制臺中顯示灰色
log.warn() ?  // 警告日志，控制臺中顯示黃色背景
log.error() ? // 錯誤日志，控制臺中顯示紅色
log.fatal() ? // 致命錯誤日志，，控制臺中顯示紅色

感謝OSC源創(chuàng)匯提供的交流機(jī)會，能和廣大開發(fā)者分享和交流學(xué)習(xí)，CLI源代碼托管在Github和碼云上：

Github主頁：https://github.com/cpselvis/f...

碼云主頁：https://gitee.com/cpselvis/fe...

附件：本次分享PPT