《大前端進階 Node.js》系列 P6必備腳手架/CI構建能力（上）

前言

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 包的開發和發佈了。

1. 初始化。進入要發佈的項目根目錄執行npm init將其初始化爲 npm 包，生成 package.json 文件
2. 登陸。在項目根目錄執行npm login，根據提示輸入註冊的用戶名、密碼和郵箱
3. 發佈。在項目跟目錄執行npm publish
4. 查看。發佈成功以後就能夠在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：✨這期代碼有點多，小夥伴們能夠直接把源代碼下載到本地，對照着源代碼，本身實現一遍。

相信正在看文章的多數小夥伴，天天都會用腳手架去作項目，去打包，發佈。怪怪以爲了解並本身實現整個前端工程化的流程，是十分必要而且極具意義的一件事

近期熱文傳送門：

• 《大前端進階 Node.js》系列 P6必備腳手架/CI構建能力（下）
• 《吐血整理》系列 大廠前端必備工具集合

---

喜歡的小夥伴麻煩加個關注，點個贊哦，感恩💕😊

聯繫我 / 公衆號

本文腳手架 /CI 構建源代碼，公衆號回覆【腳手架】便可獲取，若是有興趣參與腳手架後期共建，請微信私聊怪怪~

---

微信搜索【接水怪】或掃描下面二維碼回覆」加羣「，我會拉你進技術交流羣。講真的，在這個羣，哪怕您不說話，光看聊天記錄也是一種成長。（阿里技術專家、敖丙做者、Java3y、蘑菇街資深前端、螞蟻金服安全專家、各路大牛都在）。

接水怪也會按期原創，按期跟小夥伴進行經驗交流或幫忙看簡歷。加關注，不迷路，有機會一塊兒跑個步🏃 ↓↓↓