腳手架是啥

從前我總覺得腳手架是個很高大上的東西，好像得牛叉:ox:一點的人才寫的出來，可望而不可即。其實并不是因為困難使我們放棄，而是因為放棄才顯得困難（這是個好詞好句:see_no_evil:）。只要你肯花個一天半天的時間:fist:，也能寫出屬于你自己的腳手架。

早前腳手架這個詞是從 vue-cli 這里認識的，我們通過 npm install -g vue-cli 命令全局安裝腳手架后, 再執行 vue init webpack project-name 就能初始化好一個自己的項目，真是尼瑪的神奇:hushed:。但你有沒有想過為什么我們執行 vue init 這個命令就能有個自己的項目呢。今天，就讓我們一起來揭開廬山真面目吧！

等等:hand:，扯了一堆，你好像還沒說下啥是腳手架？emmm... 它就是個工具，方便我們新建項目用的，有了這個項目我們就能直接開發了。其實我們本可以用 git clone url 來新建（復制）項目，再 cuo 一點的方法就是復制粘貼整個文件夾，一樣也能達到初始化的目的。腳手架的本質也是從遠程下載一個模板來進行一個新項目。額。所以。。。有什么不同呢？就高大上啊:anguished:。當然不止于此啦，腳手架可是高級版的克隆，它主要是提供了交互式的命令讓我們可以動態的更改模板，然后用一句命令就可以一勞永逸了（當然還是要維護的），這應該是最主要的區別吧，反正現在我是這么想的:cry:。

好了，本章的目的就是帶領大家寫一個簡易版的腳手架 xr-cli（名字愛取啥取啥），目標是實現一個 xr init template-name project-name 這樣的命令，廢話少說，開始進入正題吧:rocket::rocket::rocket:。

源碼地址： https://github.com/lgq627628/xr-cli

前置知識

其實一個簡易版的 xr-cli 的代碼量并不多，所以這里我們先來小小介紹一下其中要依賴的包，如果你用過這些工具可以跳過，沒用過的請務必一定要瞟一眼。

commander

這是用來編寫指令和處理命令行的，具體用法如下：

const program = require("commander");// 定義指令program .version('0.0.1') .command('init', 'Generate a new project from a template') .action(() => { // 回調函數 })// 解析命令行參數program.parse(process.argv);

回憶一下，我們曾用過的 vue init 的命令就是這樣聲明的。

inquirer

這是個強大的交互式命令行工具，具體用法如下：

const inquirer = require('inquirer');inquirer .prompt([ // 一些交互式的問題 ]) .then(answers => { // 回調函數，answers 就是用戶輸入的內容，是個對象 });

想象一下我們用 vue init webpack project-name 之后是不是會有幾個交互問題，問你文件名啊、作者啊、描述啊、要不要用 eslint 啊等等之類的，就是用這個來寫的。