前言
Coding 應當是一生的事業，而不僅僅是 30 歲的青春?
本文已收錄 Github https://github.com/ponkans/F2E，歡迎 Star，持續更新?
P6 前端必備腳手架 /CI 構建能力，順著怪怪的思路往下看，然後獲取文章末尾的原始碼，跟著原始碼操作一遍，那樣收穫最大哦~
本文 cli 已釋出至 npm 倉庫，如下：
每篇文章都希望你能收穫到東西，這篇是前端工程化中腳手架 /CI 構建的流程架構分析，希望你看完，能夠有這些收穫：
- 前端工程化中腳手架的整體設計與結構
- 能夠自己獨立為企業訂製一套前端腳手架
- 嘗試參與公司腳手架共建（你也可以參與部分前端基礎建設的工作了哦）
PS：語言只是工具，架構才是核心~ 這期純乾貨，原始碼在文末~
首先請出今天的主角，噹噹噹當~~，低調奢華有內涵的腳手架 / CI 架構圖 ❤，後面的分析都是基於這個結構圖展開滴~
必要的小概念
CLI，全稱是 command-line interface，也就是命令列介面。
前端腳手架 CLI，是一個命令列工具，它的出現主要解決這幾個問題：
- 減少重複性工作
- 規範專案開發目錄結構
- 統一團隊統一開發風格，便於跨團隊合作，以及後期維護，降低新人上手成本
- 提供一鍵前端專案的建立、配置、本地開發、外掛擴充套件等功能，讓開發者更多時間專注於業務
隨著前端工程化的發展，越來越多企業選擇腳手架來從零到一搭建自己的專案。
其中大家最熟悉的就是 create-react-app 和 vue-cli，它們可以幫助我們”搭建-執行-構建“專案。
但是真正企業中，其實是需要我們自己去訂製一套符合公司的腳手架，跟公司一些基礎服務打通，上下游的銜接，內建的工具集合等。這時如果你能為公司開發一個定製化的腳手架，你會發現你就是公司最亮的仔仔~~
腳手架思路
在動手開始開發腳手架 CLI 之前我們先捋一下思路，縱覽業界比較流行的幾個腳手架，會發現雖然它們功能豐富度和複雜程度不一樣，但是總體來說都會包含以下基本功能：
CLI 搭建專案
- 根據使用者輸入生成配置檔案
- 下載指定專案模板
- 在目標目錄生成新專案
CLI 執行專案
- 本地啟動預覽
- 熱更新
- 語法、程式碼規範檢測
部署專案
- 程式碼推送至倉庫
- 前端部署的管理後臺去進行釋出
上面的部署部分，只是實現的方式之一，有的需要自動觸發打包、釋出上線的場景，採用的是去 Gitlab 下一個 Webhook，Gitlab 收到使用者 push 程式碼的操作後，會給前端部署服務中心那邊打請求，然後按照事先配置好的進行打包、釋出上線。
腳手架開發完成後，我們要讓公司其他小夥伴也能立馬用上它、愛上它，給它小心心♥(ˆ◡ˆԅ)，所以我們要將腳手架：
- 以 npm 包的方式進行釋出，小夥伴就可以直接安裝使用了
- 優雅的輸出日誌，清晰好看
依賴分析
為了實現我們神奇偉大的腳手架，需要引入以下依賴：
- babel-cli/babel-env：語法轉換工具，有了它我們在開發腳手架的時候就可以使用 ES6 語法了，不要問我為什麼要用 ES6，因為它神奇而偉大
- commander：命令列工具，有了它我們就可以讀取命令列命令，知道使用者想要做什麼了
- inquirer： 互動式命令列工具，給使用者提供一個漂亮的介面和提出問題流的方式
- download-git-repo：下載遠端模板工具，負責下載遠端倉庫的模板專案
- chalk：顏色外掛，用來修改命令列輸出樣式，通過顏色區分 info、error 日誌，清晰直觀
- ora：用於顯示載入中的效果，類似於前端頁面的 loading 效果，像下載模板這種耗時的操作，有了 loading 效果可以提示使用者正在進行中，請耐心等待
- log-symbols：日誌彩色符號，用來顯示√ 或 × 等的圖示
前期準備
專案模板
腳手架可以幫助我們快速生成一套指定的專案結構和配置，最常用的方式就是我們提前準備好一套通用的、易用的、規範的專案模板存放在指定位置，在腳手架執行建立專案命令的時候，直接將準備好的模板拷貝到目標目錄下。
PS：這裡有兩個點需要我們關注一下：
專案模板存放位置方式
第一種是和腳手架打包在一起，在安裝腳手架的時候就會將專案模板存放在全域性目錄下了，這種方式每次建立專案的時候都是從本地拷貝的速度很快，但是專案模板自身升級比較困難。
第二種是將專案模板存在遠端倉庫（比如 gitlab 倉庫），這種方式每次建立專案的時候都是通過某個地址動態下載的，專案模板更新方便。
怪怪我當然選擇第二種呀，解耦了模板和腳手架，方便更新維護。
專案模板功能豐富度
所謂專案模板，必然是一個可以作為標杆的專案，我們可以從日常用到的經典專案看出，一個成熟的專案必然支援本地啟動打包、支援熱更新、支援預發規則和程式碼風格檢查，支援比較流行的語言框架（比如 less，scss 等），更完善點還會支援單元測試。
如果大家只是想快速瞭解腳手架的搭建流程，可以用 create-react-app 和 vue-cli 搭建一個專案作為模板專案。
當然啦，你們也知道，我是一個有追求有潔癖的接水怪，喜歡自己動手，豐衣足食，所以專案模板我還是從零開始搭建了一個 webpack4+vue+typescript 的專案，專案搭建介紹放在了文章後面，別心急，往下看~
瞭解如何釋出 npm 包
首先你要準備一個 npm 賬號，如果沒有請到官網註冊。有了賬號後就可以進行 npm 包的開發和釋出了。
- 初始化。進入要釋出的專案根目錄執行
npm init將其初始化為 npm 包，生成 package.json 檔案 - 登入。在專案根目錄執行
npm login，根據提示輸入註冊的使用者名稱、密碼和郵箱 - 釋出。在專案跟目錄執行
npm publish - 檢視。釋出成功之後就可以在npm 官網檢視到自己的包了
在釋出的過程中可能因為使用了 npm 映象導致失敗，可以按照如下步驟使用nrm切換映象，然後再發布
npm i -g nrm // 安裝nrm
nrm ls // 輸出所有映象
nrm use npm //切換映象
複製程式碼小夥伴們在給自己的 npm 包起名字的時候，可以先去npm 官網查下是否已經有了這個名字，畢竟世界之大某個角落總會有那麼一個人和你志同道合，喜歡上同一個名字，關注同一個接水怪（自戀，該打）~~
腳手架架構圖
前面架構、概念該說的都說了，接下來請動起你的小手手，我們要開始搭建腳手架了。
先通過架構圖瞭解下腳手架的大致工作流程。
準備腳手架專案
第一步：建立名為 little-bird-cli 的資料夾作為腳手架專案名。
最初是想要叫 free-cli 的，因為怪怪愛自由，一切我來建立我來寫，結果官網檢視已經被佔用了。但是自由的心不變呀，所以變成了小小鳥，在這裡勸大家起名要趁早，學習也要趁早。但分手可不要趁早，畢竟最美不過從相遇到白頭️~~
mkdir little-bird-cli && cd little-bird-cli
複製程式碼第二步：npm 初始化，從上文可以瞭解到，要先初始化為 npm 包，後面才可以釋出的。
npm init // 初始化後會生成一個package.json檔案哦~
複製程式碼第三步：修改 packgage.json。
- 修改 package.json 中的 bin 引數，專門放置使用者的自定義命令，指定可執行檔案的位置，bin 裡的命令是可執行命令，模組安裝的時候如果是全域性安裝，則 npm 會為 bin 中配置的檔案建立一個全域性軟連線，在命令列工具裡可以直接執行。
- 修改 package.json 中的 scripts 引數，指定可執行命令，實時編譯指令碼，讓 node 能夠識別並執行。
新建 .babelrc 配置檔案，支援 ES6 預發轉義
安裝上文中分析的，搭建腳手架需要的相關依賴（忘記了的小夥伴，可以滑到上面依賴分析部分去看看~）
補全目錄結構
配置全域性 CLI 命令
我們的腳手架開發完成釋出到 npm 後，可以通過npm install -g free-cli全域性安裝的方式安裝就可以直接使用 CLI 命令了。
但是開發過程中為了方便除錯和實時同步修改，需要另外的方式將 CLI 命令連結到全域性。
可以在 little-bird-cli 目錄下執行npm link，該命令可以將 little-bird-cli 下的 bin 命令軟連結到全域性，直接使用。
Tips：npm link 的時候遇到過幾個小坑跟大家分享一下。
在開發的過程中可能會遇到執行命令失敗的情況，比如 zsh: command not found: little-bird-cl。
- 嘗試重新連結 npm link，再失敗的話就嘗試先刪除掉全域性命令 npm unlink little-bird-cli 然後再連結，一般情況下這樣就可以解決了。
- 還是不行就去全域性目錄裡刪除 little-bird-cli 資料夾
專案啟動
專案啟動前，我們先配置下可執行檔案，寫個簡單的 demo，用來啟動後驗證專案可以正常運轉。
可執行檔案的行首一定要加入#!/usr/bin/env node這行程式碼可以告訴系統該指令碼由 node 來執行。
bin/cmd
#!/usr/bin/env node
require('../dist/main.js');
複製程式碼src/main.js
console.log('我是一個可以正常執行的專案啦！！！')
複製程式碼開啟專案的實時監控npm run watch，這樣我們修改程式碼的時候就會實時更新了~
接下來見證奇蹟的時候到了，可以隨便找一個目錄執行 bin 裡自定義的命令【作為一個急性子，多一個字母都不願意寫，所以我會用最簡單的那個命令?lbc】，輸入 lbc，你將會看到你想要滴效果?~
處理命令列
我們通過 commander 來設定不同的命令。
command 方法設定命令的名字、description 方法是設定命令的描述、alias 方法設定命令簡稱【懶人必備】、options 設定命令需要的引數。commander 更詳細的文件可以去 commander官網檢視。
我們腳手架先加入三個命令：專案建立、專案初始化、專案啟動。原始碼在 src/main.js 中。
專案建立
專案建立思路如下：
- 專案建立命令必須輸入新建專案名稱
- 當前路徑下是否存在相同檔名，如果不做這層判斷新生成的專案可能會覆蓋你已有的專案
- 詢問使用者，引導使用者輸入配置資訊
下載模板專案，下載模版比較耗時，可以通過 ora 提示使用者正在下載模版，下載結束後再給出提示
專案下載完成後，根據使用者輸入更新配置檔案
啟動專案要用的工具方法已經寫好，下面我們進入建立正文，src/create.js 中檢視原始碼。
專案初始化
專案初始化主要做以下幾點：
- 安裝依賴，為了減小專案模板包的大小，下載的模板裡不包含 node_modules 目錄，建立完成之後要安裝依賴
- 初始化 git 倉庫，方便程式碼提交管理
- 自動在遠端生成 git 倉庫，這一步後續文章補充，這裡就先不寫了
進入到專案目錄，執行初始化命令，lbc init，完成專案初始化
專案啟動
所謂專案啟動就是說可以讓我們的專案本地執行。接下來我們就是藉助 webpack 來實現我們腳手架的本地啟動。
webpack4+vue+typescript 本地配置好了以後，直接執行 lbc dev -p 3000 就能檢視效果哦，哦豁~
釋出 & 使用
噹噹噹…小夥伴們迫不及待看成品了吧，在 npm官網檢視是否可以搜到
完成！可以通過 npm i -g little-bird-cli 安裝腳手架包，裝之前最好先把之前開發時鏈到全域性的命令刪除掉，安裝成功之後就可以使用了 biubiubiubiu~ 發射?~~
npm unlink little-bird-cli
npm unlink lb-cli
npm unlink lbc
npm i -g little-bird-cli
複製程式碼執行lbc dev -p 8001瀏覽器會自動開啟訪問本地專案
入門擴充篇-3 分鐘搭建
這裡簡單介紹一下 WebPack 4 +TypeScript 3 +Vue +less 簡單環境搭建。
自己搭建過的小夥伴直接跳到文末吧?~
專案初始化
mkdir vue-template && cd vue-template
mkdir public
mkdir src && cd src
mkdir components
mkdir assets
cd ../
npm init
git init
複製程式碼安裝如下依賴：
- 在 webpack4 中已經將 webpack 和它的 cli 分開了，所以需引入 webpack 和 webpack-cli
- 支援熱更新，需引入 webpack-dev-server
- 當使用 webpack 打包時，建立一個 html 檔案，並把 webpack 打包後的靜態檔案自動插入到這個 html 檔案當中，需引入 html-webpack-plugin
- 支援啟動後自動開啟瀏覽器，需引入 open-browser-webpack-plugin
- 支援 vue 解析，需引入 vue-loader 和 vue-template-compiler
- 支援 style、css、less 解析,需引入 style-loader、css-loader 和 less-loader
- 支援 typescript， 需引入 ts-loader
配置檔案
- 專案根目錄建立 tsconfig.json（開始用不上，但是該檔案建立後無需要變動）
- 專案根目錄建立 webpack.config.json
- 修改配置檔案 package.json
"scripts": {
"dev":"webpack-dev-server --open --mode development"
}
複製程式碼新建檔案
- public 目錄新建主入口檔案 index.html
- src 目錄下新建 vue 入口檔案 index.ts
啟動專案
- npm run dev
小結
到此為止，我們實現了文章一開始的腳手架的建立，拉取模板，執行部分。也就是下圖中的左邊部分：
可以優化地方
本來是想把 CI 自動化部署這一塊也寫進來，但感覺那樣文章太長了，所以留到了《大前端進階 Node.js》系列 P6 前端必備腳手架 /CI 構建能力（下）。也給小夥伴們留足自己實踐的時間 ~
作為腳手架的專案模板，有些功能我們會直接繼承到腳手架裡，所以還會對上面搭建的專案模板做些精簡工作。比如專案啟動會繼承到腳手架裡，那麼該專案裡的相關內容則可去掉。
- 去掉 package.json 的 dev 命令
- 清空 webpack.config.js
- 刪除依賴：html-webpack-plugin webpack-dev-server
- 腳手架建立專案時，在遠端生成對應倉庫
CI 部分
上面小結部分的架構圖中，右邊部分是下期分享滴，也就是自動化構建，部署 CI 這一塊的東西~
- docker + Nginx 實現專案部署
- Gitlab / Github 下 Webhook
- Jenkins 實現自動構建流程
總結
本文已收錄 Github https://github.com/ponkans/F2E，歡迎 Star，持續更新?
PS：✨這期程式碼有點多，小夥伴們可以直接把原始碼下載到本地，對照著原始碼，自己實現一遍。
相信正在看文章的多數小夥伴，每天都會用腳手架去做專案，去打包，釋出。怪怪覺得了解並自己實現整個前端工程化的流程，是十分必要並且極具意義的一件事
近期熱文傳送門：
喜歡的小夥伴麻煩加個關注，點個贊哦，感恩??
聯絡我 / 公眾號
本文腳手架 /CI 構建原始碼，公眾號回覆【腳手架】即可獲取，如果有興趣參與腳手架後期共建，請微信私聊怪怪~
微信搜尋【接水怪】或掃描下面二維碼回覆”加群“，我會拉你進技術交流群。講真的，在這個群，哪怕您不說話，光看聊天記錄也是一種成長。（阿里技術專家、敖丙作者、Java3y、蘑菇街資深前端、螞蟻金服安全專家、各路大牛都在）。
接水怪也會定期原創，定期跟小夥伴進行經驗交流或幫忙看簡歷。加關注，不迷路，有機會一起跑個步? ↓↓↓