現代 CLI 和 GUI 方案指南

2021 年 4 月 19 日
筆記
CLI, javascript, 前端工程化

原文鏈接：//axuebin.com/articles/fe-solution/cli/desc.html，轉載請聯繫

寫在前面

提到初始化項目，那就必須提到腳手架這個名詞，那為什麼這篇文章的標題不是關於腳手架而是關於初始化項目呢？

腳手架這個名詞來源於建築工程領域，百度百科對其的解釋是「腳手架是為了保證各施工過程順利進行而搭設的工作平台」，也就是說腳手架為工人提供了施工的基礎功能。將其引申到軟體工程領域，又是什麼含義呢？

狹義上講，腳手架是一個可以快速地使用配置好的工程模板初始化工程的工具，避免重複工作，為開發者提供便利；
廣義上講，腳手架是一個完善的面向整個前端項目生命周期的工程解決方案，從初始化、開發調試到構建部署，都提供了一系列的工具或者規範，並且集成到一個「工具」中，開發者只需關心業務邏輯開發即可，這工具也可以稱為「腳手架」。

由於完整的工程解決方案會涉及到大量的知識點，在這裡就不展開說了。本文介紹的腳手架僅是狹義上的項目初始化。

為什麼需要腳手架

現在大多數開發者已經習慣使用 vue-cli / create-react-app 等工具來快速初始化一個項目，不妨先看看前端項目初始化的一個發展歷程：

遠古時代。手動創建前端三件套：index.html/index.js/index.css，在 index.html 里分別引入 index.js 和 index.css
石器時代。將項目模板程式碼託管到 Git/SVN 上，使用的時候先手動將程式碼拉到本地，然後修改文件夾名以及項目中的配置
青銅時代。通過腳本，自動化做了一些事情：拉取項目模板、配置項目資訊等
蒸汽時代。形成一套完整的命令行工具，比如 vue-cli/ create-react-app 等
工業時代。在 cra/vue-cli 的基礎上訂製個性能力，接入自定義模板、自動化 Git 流程、數據採集等
現代。腳手架已經跳出終端（命令行），有了可視化、WebIDE 等方案，通過更為方便的交互即可完成項目的初始化

從這樣一個發展歷程可以看出，腳手架解決的核心問題就是 —— 幫助開發者更方便地初始化項目，這也就是為什麼需要腳手架。總結來說，腳手架最重要的作用有兩點：

提高效率。之前初始化一個可用的項目可能需要 1 個小時甚至更久，到如今只需要敲個命令或者點下滑鼠然後伸個懶腰就搞定了
降低成本。比如創建文件、配置項目資訊等都是重複工作，開發者沒必要花精力在這些可以自動化的事情上

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

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

常見腳手架底層方案

目前，常見的腳手架底層都會依賴兩種方案：使用 download-git-repo 來下載模板程式碼，以及使用 Yeoman 來作為腳手架的一個核心能力進行擴展。

download-git-repo

通過 download-git-repo 這個 npm 包可以實現 git 倉庫的拉取，支援 GitHub、GitLab 等。基於這個 npm 包，我們可以寫一個簡單的腳本來實現簡易的模板下載功能。

關於 download-git-repo 的用法在這裡就不展開了，感興趣的可以自己試試看。

Yeoman Generator

Yeoman 是一個較早就出現的腳手架工具，它的第一次發布已經是在 8 年前，那時候我還沒開始學習前端。很多人都說，前端技術太雜，各種技術更新太快，這句話也沒什麼問題，前端技術隨著移動互聯網的爆發也迎來了百花齊放的時代，一些技術在潮流中被後浪就拍沒了。Yeoman 歷經 8 年還存活著，這是為什麼呢？不急，待我們剖析了 Yeoman 的原理之後，你會覺得它確實可以在現在的前端工程化中佔有一席之地。

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

將 Yeoman 放在了「常見腳手架底層方案」，是因為 Yeoman 它並不能直接初始化項目所需的文件，它是一個腳手架系統，開發者們使用 Yeoman 提供的 API 可以訂製任意腳手架，完全開放、自由的，擴展性極強。

可以理解 Yeoman 提供一個插件體系，開發者可以自定開發插件來使用 Yeoman 的能力，這個「插件」在 Yeoman 中稱為 generators，所有程式碼生成的能力都由 generators 提供。

是不是充滿了想像力？這個包的存在，給腳手架的實現提供了無限可能性。

常見腳手架集成方案

目前對於前端開發者來說，社區上比較常用的兩個腳手架是 Vue CLI 和 Create React App。

Vue CLI

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，提供了終端命令行工具、零配置腳手架、插件體系、圖形化管理介面等。

核心思想

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

預設管理。在 CLI 內部通過統一的實例對 prompt（終端交互）和 preset（預設）進行管理，交互之前存在互聯關聯層層遞進的關係，在初始化的時候，這些用於終端交互的配置就初始化在記憶體中，根據用戶的選擇觸發不同的邏輯。
靈活的插件系統。在 Vue CLI 中使用了一套基於插件的架構，將 CLI 的邏輯和生成程式碼的邏輯解耦，通過不同的插件去修改文件內容和配置，生成最終的程式碼。

Vue CLI 同時還提供了圖形化介面對項目進行初始化、管理，這也是和 Create React App 等 CLI 不同的地方之一。

自定義模板

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

如果開發者需要自定義模板，需要開發一個插件來創建新的模板，在插件中編寫相關生成程式碼的邏輯。

源碼解析

如果你想了解更多關於 Vue CLI 的細節，可以閱讀 Vue CLI 是如何實現的 — 終端命令行工具篇。

Create React App

Create React App 是 React 官方創建應用的腳手架。

核心思想

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

腳手架核心功能中心化：使用 npx 保證每次用戶使用的都是最新版本，方便功能的升級
模板去中心化：方便地進行模板管理，這樣也允許用戶自定義模板
腳手架邏輯和初始化程式碼邏輯分離：CLI 中只負責核心依賴、模板的安裝和腳手架的核心功能，而初始化程式碼的邏輯在 react-scripts 包里執行

自定義模板

使用 Create React App 時，可以傳入 template 參數使用自定義模板：

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

如果不傳，則使用 cra-template 這個默認模板。

比如， --template typescript 就會使用 cra-template-typescript 這個 TypeScript 的模板。

用戶可以按照模板規範發布自定義模板，並且發布到 npm 上。最主要的一個規範是，它的 npm 包名是 cra-template-xxx。

源碼解析

如果你想了解更多關於 create-react-app 的細節，可以閱讀 create react app 核心思路分析。

總結

無論是 create-react-app 還是 Vue CLI，在設計的時候都會盡量考慮插件機制，將能力開放出去給開發者再將功能集成到 CLI。除了有利於自身的功能迭代之外，對於社區開發者來說，都具備了足夠的開放性和擴展性。

並且可以看到，這兩個腳手架已經拋開了對 git 的依賴，將模板的程式碼通過 npm 進行管理，並且藉助一些類似 ejs 等的模板引擎能力，對靜態模板中的程式碼進行渲染替換，模板程式碼可以更加多樣化。

常見現代方案

到了「工業時代」，腳手架不僅僅是在 CLI 中通過 init 等命令生成一個程式碼目錄這麼單調了，趨勢逐漸向平台化發展，並且枯燥單調的終端介面也在往 UI 圖形化介面過渡。

圖形化介面：Vue UI

先來看一下圖形化介面，上文提到的 Vue CLI 就提供了對應的圖形化介面來對項目進行管理。

相比於 CLI 枯燥的介面和交互單一，UI 圖形化介面有更豐富的交互形式，對於現代開發者來說美觀。當然，它不是簡單的一個 web 介面，你可以先使用 vue ui 體驗一下。

這是 Vue UI 的整體架構圖：

我們將 Vue UI 看作運行在瀏覽器的客戶端，而本地終端起了一個 Node 服務當作是服務端。通過插件機制，在插件中開發者可以調用插件 API 做一些事情，也可以完成客戶端和服務端的通訊。比如在圖形化介面上初始化了項目之後，終端會收到事情「觸發」，然後將項目程式碼初始化到本地文件系統中。

參考鏈接：//cli.vuejs.org/guide/creating-a-project.html#using-the-gui

IDE 集成編輯器：小程式開發者工具

除了 UI 圖形介面之外，如今初始化項目的能力也常被集成在 IDE 中，比如小程式開發工具。

打開支付寶小程式開發者工具，就可以直接根據需要選擇一個功能完備的模板初始化項目，比如開發者想要在支付寶小程式中體驗 Serverless 的功能，就可以直接選中 Serverless 入門 DEMO 這個模板創建項目。

項目初始化之後，開發者也是在這個 IDE 中進行開發、構建、發布，在整個開發鏈路中，都不會有切換工具帶來的負擔，對於開發者而言，開發體驗是非常棒的。

參考鏈接：//opendocs.alipay.com/mini/ide/start-page

VSCode 插件：Iceworks

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

比如，Iceworks 就是一款可視化智慧研發助手，幫助開發者快速使用可視化和智慧化的能力進行應用開發。

在 VSCode 中安裝了 Iceworks 插件之後，就有圖形化介面引導創建應用，點擊完成之後就直接在本地生成項目文件了。在這之後，就是正常地使用 VSCode 進行開發。

參考鏈接：//ice.work/docs/guide/gui-start

總結

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

Tags: CLI javascript 前端工程化