如何編寫一個(gè)現(xiàn)代的前端工程化 CLI 工具？

0. 寫在前面

提到初始化項(xiàng)目，那就必須提到腳手架這個(gè)名詞，那為什么這篇文章的標(biāo)題不是關(guān)于腳手架而是關(guān)于初始化項(xiàng)目呢？

腳手架這個(gè)名詞來源于建筑工程領(lǐng)域，百度百科對(duì)其的解釋是“腳手架是為了保證各施工過程順利進(jìn)行而搭設(shè)的工作平臺(tái)”，也就是說腳手架為工人提供了施工的基礎(chǔ)功能。將其引申到軟件工程領(lǐng)域，又是什么含義呢？

• 狹義上講，腳手架是一個(gè)可以快速地使用配置好的工程模板初始化工程的工具，避免重復(fù)工作，為開發(fā)者提供便利；
• 廣義上講，腳手架是一個(gè)完善的面向整個(gè)前端項(xiàng)目生命周期的工程解決方案，從初始化、開發(fā)調(diào)試到構(gòu)建部署，都提供了一系列的工具或者規(guī)范，并且集成到一個(gè)“工具”中，開發(fā)者只需關(guān)心業(yè)務(wù)邏輯開發(fā)即可，這工具也可以稱為“腳手架”。

由于完整的工程解決方案會(huì)涉及到大量的知識(shí)點(diǎn)，在這里就不展開說了。本文介紹的腳手架僅是狹義上的項(xiàng)目初始化。

1. 為什么需要腳手架

現(xiàn)在大多數(shù)開發(fā)者已經(jīng)習(xí)慣使用 vue-cli / create-react-app 等工具來快速初始化一個(gè)項(xiàng)目，不妨先看看前端項(xiàng)目初始化的一個(gè)發(fā)展歷程：

1. 遠(yuǎn)古時(shí)代。手動(dòng)創(chuàng)建前端三件套：index.html/index.js/index.css，在 index.html 里分別引入 index.js 和 index.css
2. 石器時(shí)代。將項(xiàng)目模板代碼托管到 Git/SVN 上，使用的時(shí)候先手動(dòng)將代碼拉到本地，然后修改文件夾名以及項(xiàng)目中的配置
3. 青銅時(shí)代。通過腳本，自動(dòng)化做了一些事情：拉取項(xiàng)目模板、配置項(xiàng)目信息等
4. 蒸汽時(shí)代。形成一套完整的命令行工具，比如 vue-cli/ create-react-app 等
5. 工業(yè)時(shí)代。在 cra/vue-cli 的基礎(chǔ)上定制個(gè)性能力，接入自定義模板、自動(dòng)化 Git 流程、數(shù)據(jù)采集等
6. 現(xiàn)代。腳手架已經(jīng)跳出終端（命令行），有了可視化、WebIDE 等方案，通過更為方便的交互即可完成項(xiàng)目的初始化

從這樣一個(gè)發(fā)展歷程可以看出，腳手架解決的核心問題就是 ——?幫助開發(fā)者更方便地初始化項(xiàng)目，這也就是為什么需要腳手架?？偨Y(jié)來說，腳手架最重要的作用有兩點(diǎn)：

1. 提高效率。之前初始化一個(gè)可用的項(xiàng)目可能需要 1 個(gè)小時(shí)甚至更久，到如今只需要敲個(gè)命令或者點(diǎn)下鼠標(biāo)然后伸個(gè)懶腰就搞定了
2. 降低成本。比如創(chuàng)建文件、配置項(xiàng)目信息等都是重復(fù)工作，開發(fā)者沒必要花精力在這些可以自動(dòng)化的事情上

在完整的前端工程體系中，腳手架起到至關(guān)重要的作用。

接下來介紹幾個(gè)目前常用的的、你一定見過的幾種腳手架方案，你是否有思考過它是如何實(shí)現(xiàn)的呢？

2. 常見腳手架底層方案

目前，常見的腳手架底層都會(huì)依賴兩種方案：使用 download-git-repo 來下載模板代碼，以及使用 Yeoman 來作為腳手架的一個(gè)核心能力進(jìn)行擴(kuò)展。

2.1 download-git-repo

通過?download-git-repo^[1]?這個(gè) npm 包可以實(shí)現(xiàn) git 倉(cāng)庫(kù)的拉取，支持 GitHub、GitLab 等?；谶@個(gè) npm 包，我們可以寫一個(gè)簡(jiǎn)單的腳本來實(shí)現(xiàn)簡(jiǎn)易的模板下載功能。

關(guān)于 download-git-repo 的用法在這里就不展開了，感興趣的可以自己試試看。

2.2 Yeoman Generator

Yeoman^[2]?是一個(gè)較早就出現(xiàn)的腳手架工具，它的第一次發(fā)布已經(jīng)是在 8 年前，那時(shí)候我還沒開始學(xué)習(xí)前端。很多人都說，前端技術(shù)太雜，各種技術(shù)更新太快，這句話也沒什么問題，前端技術(shù)隨著移動(dòng)互聯(lián)網(wǎng)的爆發(fā)也迎來了百花齊放的時(shí)代，一些技術(shù)在潮流中被后浪就拍沒了。Yeoman 歷經(jīng) 8 年還存活著，這是為什么呢？不急，待我們剖析了 Yeoman 的原理之后，你會(huì)覺得它確實(shí)可以在現(xiàn)在的前端工程化中占有一席之地。

Yeoman is a generic scaffolding system allowing the creation of any kind of app.

將 Yeoman 放在了「常見腳手架底層方案」，是因?yàn)?Yeoman 它并不能直接初始化項(xiàng)目所需的文件，它是一個(gè)腳手架系統(tǒng)，開發(fā)者們使用 Yeoman 提供的 API 可以定制任意腳手架，完全開放、自由的，擴(kuò)展性極強(qiáng)。

可以理解 Yeoman 提供一個(gè)插件體系，開發(fā)者可以自定開發(fā)插件來使用 Yeoman 的能力，這個(gè)“插件”在 Yeoman 中稱為 generators，所有代碼生成的能力都由 generators 提供。

是不是充滿了想象力？這個(gè)包的存在，給腳手架的實(shí)現(xiàn)提供了無限可能性。

3. 常見腳手架集成方案

目前對(duì)于前端開發(fā)者來說，社區(qū)上比較常用的兩個(gè)腳手架是 Vue CLI 和 Create React App。

3.1 Vue CLI

Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)，提供了終端命令行工具、零配置腳手架、插件體系、圖形化管理界面等。

3.1.1 核心思想

Vue CLI 的核心原理主要有兩部分：

1. 預(yù)設(shè)管理。在 CLI 內(nèi)部通過統(tǒng)一的實(shí)例對(duì) prompt（終端交互）和 preset（預(yù)設(shè)）進(jìn)行管理，交互之前存在互聯(lián)關(guān)聯(lián)層層遞進(jìn)的關(guān)系，在初始化的時(shí)候，這些用于終端交互的配置就初始化在內(nèi)存中，根據(jù)用戶的選擇觸發(fā)不同的邏輯。
2. 靈活的插件系統(tǒng)。在 Vue CLI 中使用了一套基于插件的架構(gòu)，將 CLI 的邏輯和生成代碼的邏輯解耦，通過不同的插件去修改文件內(nèi)容和配置，生成最終的代碼。

Vue CLI 同時(shí)還提供了圖形化界面對(duì)項(xiàng)目進(jìn)行初始化、管理，這也是和 Create React App 等 CLI 不同的地方之一。

3.1.2 自定義模板

Vue CLI 官方初始化模板只有一個(gè)，內(nèi)置在?@vue/cli-service? 核心插件中，CLI 提供的?api.render('./template')? 方法會(huì)將模板通過 EJS 模板引擎渲染到內(nèi)存中，最終在 CLI 中通過 Node 的寫文件操作寫到本地目錄中。

如果開發(fā)者需要自定義模板，需要開發(fā)一個(gè)插件來創(chuàng)建新的模板^[3]，在插件中編寫相關(guān)生成代碼的邏輯。

3.1.3 源碼解析

如果你想了解更多關(guān)于 Vue CLI 的細(xì)節(jié)，可以閱讀?Vue CLI 是如何實(shí)現(xiàn)的 -- 終端命令行工具篇。

3.2 Create React App

Create React App 是 React ?官方創(chuàng)建應(yīng)用的腳手架。

3.2.1 核心思想

Create React App 的核心思想我理解主要是：

1. 腳手架核心功能中心化：使用?npx?保證每次用戶使用的都是最新版本，方便功能的升級(jí)
2. 模板去中心化：方便地進(jìn)行模板管理，這樣也允許用戶自定義模板
3. 腳手架邏輯和初始化代碼邏輯分離：CLI 中只負(fù)責(zé)核心依賴、模板的安裝和腳手架的核心功能，而初始化代碼的邏輯在?react-scripts?包里執(zhí)行

3.2.2 自定義模板

使用 Create React App 時(shí)，可以傳入?template?參數(shù)使用自定義模板：

npx?create-react-app?my-app?--template?[template-name]

如果不傳，則使用 cra-template 這個(gè)默認(rèn)模板。

比如，?--template typescript?就會(huì)使用 cra-template-typescript 這個(gè) TypeScript 的模板。

用戶可以按照模板規(guī)范^[4]發(fā)布自定義模板，并且發(fā)布到?npm?上。最主要的一個(gè)規(guī)范是，它的 npm 包名是?cra-template-xxx。

3.2.3 源碼解析

如果你想了解更多關(guān)于?create-react-app?的細(xì)節(jié)，可以閱讀?create react app 核心思路分析。

3.3 總結(jié)

無論是 create-react-app 還是 Vue CLI，在設(shè)計(jì)的時(shí)候都會(huì)盡量考慮插件機(jī)制，將能力開放出去給開發(fā)者再將功能集成到 CLI。除了有利于自身的功能迭代之外，對(duì)于社區(qū)開發(fā)者來說，都具備了足夠的開放性和擴(kuò)展性。

并且可以看到，這兩個(gè)腳手架已經(jīng)拋開了對(duì) git 的依賴，將模板的代碼通過 npm 進(jìn)行管理，并且借助一些類似 ejs 等的模板引擎能力，對(duì)靜態(tài)模板中的代碼進(jìn)行渲染替換，模板代碼可以更加多樣化。

4. 常見現(xiàn)代方案

到了“工業(yè)時(shí)代”，腳手架不僅僅是在 CLI 中通過?init? 等命令生成一個(gè)代碼目錄這么單調(diào)了，趨勢(shì)逐漸向平臺(tái)化發(fā)展，并且枯燥單調(diào)的終端界面也在往 UI 圖形化界面過渡。

4.1 圖形化界面：Vue UI

先來看一下圖形化界面，上文提到的 Vue CLI 就提供了對(duì)應(yīng)的圖形化界面來對(duì)項(xiàng)目進(jìn)行管理。

相比于 CLI 枯燥的界面和交互單一，UI 圖形化界面有更豐富的交互形式，對(duì)于現(xiàn)代開發(fā)者來說美觀。當(dāng)然，它不是簡(jiǎn)單的一個(gè) web 界面，你可以先使用?vue ui? 體驗(yàn)一下。

這是 Vue UI 的整體架構(gòu)圖：

我們將 Vue UI 看作運(yùn)行在瀏覽器的客戶端，而本地終端起了一個(gè) Node 服務(wù)當(dāng)作是服務(wù)端。通過插件機(jī)制，在插件中開發(fā)者可以調(diào)用插件 API 做一些事情，也可以完成客戶端和服務(wù)端的通信。比如在圖形化界面上初始化了項(xiàng)目之后，終端會(huì)收到事情“觸發(fā)”，然后將項(xiàng)目代碼初始化到本地文件系統(tǒng)中。

參考鏈接：https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui^[5]

4.2 IDE 集成編輯器：小程序開發(fā)者工具

除了 UI 圖形界面之外，如今初始化項(xiàng)目的能力也常被集成在 IDE 中，比如小程序開發(fā)工具。

打開支付寶小程序開發(fā)者工具，就可以直接根據(jù)需要選擇一個(gè)功能完備的模板初始化項(xiàng)目，比如開發(fā)者想要在支付寶小程序中體驗(yàn) Serverless 的功能，就可以直接選中 Serverless 入門 DEMO 這個(gè)模板創(chuàng)建項(xiàng)目。

項(xiàng)目初始化之后，開發(fā)者也是在這個(gè) IDE 中進(jìn)行開發(fā)、構(gòu)建、發(fā)布，在整個(gè)開發(fā)鏈路中，都不會(huì)有切換工具帶來的負(fù)擔(dān)，對(duì)于開發(fā)者而言，開發(fā)體驗(yàn)是非常棒的。

參考鏈接：https://opendocs.alipay.com/mini/ide/start-page^[6]

4.3 VSCode 插件：Iceworks

目前很多前端開發(fā)者都在用 VSCode 整個(gè)編輯器，如果讓開發(fā)者為了一些提效的能力去放棄常用、熟悉的編輯器，也不是一個(gè)很好的選擇。VSCode 插件作為一個(gè)輕量級(jí)的接入方式，也可以讓開發(fā)者在 VSCode 中使用初始化項(xiàng)目等功能。

比如，Iceworks 就是一款可視化智能研發(fā)助手，幫助開發(fā)者快速使用可視化和智能化的能力進(jìn)行應(yīng)用開發(fā)。

在 VSCode 中安裝了 Iceworks 插件之后，就有圖形化界面引導(dǎo)創(chuàng)建應(yīng)用，點(diǎn)擊完成之后就直接在本地生成項(xiàng)目文件了。在這之后，就是正常地使用 VSCode 進(jìn)行開發(fā)。

參考鏈接：https://ice.work/docs/guide/gui-start^[7]

5. 總結(jié)

這篇文章主要是介紹前端工程化中初始化項(xiàng)目的部分，CLI 章節(jié)對(duì) Vue CLI 和 Create React App 進(jìn)行了源碼解析，其它章節(jié)沒有展開介紹，感興趣的朋友可以深入了解一下。

個(gè)人原創(chuàng)技術(shù)文章會(huì)發(fā)在公眾號(hào)玩相機(jī)的程序員上，用鍵盤和相機(jī)記錄生活的公眾號(hào)。

參考資料