前言

腳手架工具 vue 有 vue-cli，react 有 create-react-app，根據選擇項來生成新項目模板。但往往這些不夠定制化，生成項目之后還需要添加很多配置，離生成即用還有一定的差距，可以通過定制自己的cli工具來進行處理，做一個簡單的cli工具，集成自己預設的模板，根據模板來生成，后續只需維護模板的添加和更新。

package.json

因為是cli工具，需要可以在命令行中執行命令，所以在package.json需要聲明
主要的字段是bin，可執行文件，如下即聲明：sum 為可執行命令，并且去執行 src/index.js

"bin": {
  "sum": "src/index.js"
},

可執行文件

src/index.js里加入，表示是可執行文件

#!/usr/bin/env node

cli相關各種工具庫介紹

commander

commander 的主要作用是命令行帶參數，例如

sum init -l 
# or
sum init --local

代碼如下：sum -v 或者 sum --version就會打印出當前cli的版本，加參數可以通過對接受參數進行定義區分實現相應的功能

program
    .version(pkg.version, '-v, --version')
    .usage('<command> [options]')
    .description('Standard tooling generate dir from templates')

program
    .command('init [name]')
    .description('Create a project')
    .option('-l, --local', 'Create dir from local template')
    .option('-g, --git', 'Create dir from git address')
    .action((name, options) => {
        console.log(name, options.local, options.git)
    })

inquirer

inquirer 的主要作用是詢問，有input 輸入框輸入，number 數字輸入，confirm yes/no確認，list/rawlist 列表選擇（單選），expand展開，checkbox多選，password密碼輸入，editor在臨時文件上啟動用戶首選編輯器的實例。

type: (String) Type of the prompt. Defaults: input - Possible values: input, number, confirm, list, rawlist, expand, checkbox, password, editor

詢問用戶的選擇，根據用戶選擇執行不同操作，生成不同的模板

ora

相當于命令行終端中的進度條，用它來表示動作的開始和結束，加載中等狀態

chalk

chalk 即粉筆，在命令行終端中輸出彩色的文字

update-notifier

更新通知程序，工具包有更新的話提示

const updateNotifier = require('update-notifier');
const pkg = require('./package.json');

updateNotifier({pkg}).notify();

sum-cli 功能示例

幾個最新的初始化預設模板可用，eslint、prettier、husky、commitlint、vue-router/react-router-dom、axios等等都已預設

安裝

sum-cli npm包地址

npm i -g sum-cli
# or
yarn global add sum-cli

npx 使用

npx sum init <project-name>

查看版本

sum -v
# or 
sum --version

查看幫助

sum -h
# or 
sum --help

1. 從預設模板中拉取生成項目

sum init <project-name>

2. 從git下載模板生成項目

sum init -g <project-name>
# or
sum init --git <project-name>

3. 從本地文件夾下載生成項目

sum init -l <project-name>
# or
sum init --local <project-name>

sum-cli代碼地址