原文鏈接：http://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 做一些事情，也可以完成客戶端和服務端的通信，比如在圖形化界面上初始化了專案之后，終端會收到事情“觸發”，然后將專案代碼初始化到本地檔案系統中，
參考鏈接：https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui
IDE 集成編輯器：小程式開發者工具
除了 UI 圖形界面之外，如今初始化專案的能力也常被集成在 IDE 中，比如小程式開發工具，
打開支付寶小程式開發者工具，就可以直接根據需要選擇一個功能完備的模板初始化專案，比如開發者想要在支付寶小程式中體驗 Serverless 的功能，就可以直接選中 Serverless 入門 DEMO 這個模板創建專案，
專案初始化之后，開發者也是在這個 IDE 中進行開發、構建、發布，在整個開發鏈路中，都不會有切換工具帶來的負擔，對于開發者而言，開發體驗是非常棒的，
參考鏈接：https://opendocs.alipay.com/mini/ide/start-page
VSCode 插件：Iceworks
目前很多前端開發者都在用 VSCode 整個編輯器，如果讓開發者為了一些提效的能力去放棄常用、熟悉的編輯器，也不是一個很好的選擇，VSCode 插件作為一個輕量級的接入方式，也可以讓開發者在 VSCode 中使用初始化專案等功能，
比如，Iceworks 就是一款可視化智能研發助手，幫助開發者快速使用可視化和智能化的能力進行應用開發，
在 VSCode 中安裝了 Iceworks 插件之后，就有圖形化界面引導創建應用，點擊完成之后就直接在本地生成專案檔案了，在這之后，就是正常地使用 VSCode 進行開發，
參考鏈接：https://ice.work/docs/guide/gui-start
總結
這篇文章主要是介紹前端工程化中初始化專案的部分，CLI 章節對 Vue CLI 和 Create React App 進行了原始碼決議，其它章節沒有展開介紹，感興趣的朋友可以深入了解一下，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/277993.html
標籤：JavaScript
下一篇：ES6變數宣告決議