前言

像我們熟悉的 vue-cli，create-react-app 等腳手架，只需要輸入簡單的命令 vue init webpack project，即可快速幫我們生成一個初始項目。在實際工作中，我們可以定制一個屬于自己的腳手架，來提高自己的工作效率。

為什么需要需要腳手架？

思路

要開發腳手架，首先要理清思路，腳手架是如何工作的？我們可以借鑒 vue-cli 的基本思路。vue-cli 是將項目模板放在 git 上，運行的時候再根據用戶交互下載不同的模板，經過模板引擎渲染出來，生成項目。這樣將模板和腳手架分離，就可以各自維護，即使模板有變動，只需要上傳最新的模板即可，而不需要用戶去更新腳手架就可以生成最新的項目。那么就可以按照這個思路來進行開發了。

第三方庫

首先來看看會用到哪些庫。

初始化項目

首先創建一個空項目，然后新建一個 index.js 文件，再執行 npm init 生成一個 package.json 文件。最后安裝上面需要用到的依賴。

npm install commander download-git-repo inquirer handlebars ora chalk log-symbols -S

處理命令行

node.js 內置了對命令行操作的支持，在 package.json 中的 bin 字段可以定義命令名和關聯的執行文件。所以現在 package.json 中加上 bin 的內容：

{ "name": "suporka-parcel-vue", "version": "1.0.0", "description": "a vue cli which use parcel to package object", "bin": {  "suporka-parcel-vue": "index.js" }, ...}

然后在 index.js 中來定義 init 命令：

#!/usr/bin/env nodeconst program = require('commander');program.version('1.0.0', '-v, --version')  .command('init <name>')  .action((name) => {    console.log(name);  });program.parse(process.argv);

調用 version('1.0.0', '-v, --version') 會將 -v 和 --version 添加到命令中，可以通過這些選項打印出版本號。

調用 command('init <name>') 定義 init 命令，name 則是必傳的參數，為項目名。

action() 則是執行 init 命令會發生的行為，要生成項目的過程就是在這里面執行的，這里暫時只打印出 name。