1 前言
1.1
像我們熟悉的 vue-cli，taro-cli 等腳手架，只需要輸入簡單的命令 taro init project ，即可快速幫我們生成一個初始項目。在日常開發中，有一個腳手架工具可以用來提高工作效率。
1.2 為什么需要腳手架
1.3 怎樣來搭建呢？
腳手架是怎么樣進行構建的呢，我是借助了 taro-cli 的思路。
1.4 本文的目標讀者
1 想要學習更多和了解更多的人
2 對技術充滿熱情
2 搭建前準備
2.1 第三方工具
commander.js ，可以自動的解析命令和參數，用于處理用戶輸入的命令。
download-git-repo ，下載并提取 git 倉庫，用于下載項目模板。
Inquirer.js ，通用的命令行用戶界面集合，用于和用戶進行交互。
handlebars.js ，模板引擎，將用戶提交的信息動態填充到文件中。
ora ，下載過程久的話，可以用于顯示下載中的動畫效果。
chalk ，可以給終端的字體加上顏色。
log-symbols ，可以在終端上顯示出 √ 或 × 等的圖標
2.2 上手
2.2.1 新建一個文件夾，然后npm init初始化
npm 不單單用來管理你的應用和網頁的依賴，你還能用它來封裝和分發新的 shell 命令。
$ mkdir lq-cli$ npm init
這時在我們的 lq-cli 項目中有 package.json 文件，然后需要創建一個 JS 文件包含我們的腳本就取名 index.js 吧。 package.json 內容如下
{ "name": "lq-shell", "version": "1.0.0", "description": "腳手架搭建", "main": "index.js", "bin": { "lq": "./index.js" }, "scripts": { "test": "test" }, "keywords": [ "cli" ], "author": "prune", "license": "ISC"}index.js內容如下
#!/usr/bin/env nodeconsole.log('Hello, cli!');到這一步就可以簡單運行一下這個命令
npm linklq
npm link 命令可以將一個任意位置的 npm 包鏈接到全局執行環境，從而在任意位置使用命令行都可以直接運行該 npm 包。 控制臺會輸出 Hello, cli!
2.2.2 捕獲init之類的命令
前面的一個小節，可以跑一個命令行了，但是我們看到的 taro-cli 中還有一些命令，init初始化項目之類。這個時候 commander 就需要利用起來了。 運行下面的這個命令將會把最新版的 commander 加入 package.json
npm install --save commander
引入 commander 我們將 index.js 做如下修改
#!/usr/bin/env nodeconsole.log('Hello, cli!')const program = require('commander')program .version(require('./package').version, '-v, --version') .command('init <name>') .action((name) => { console.log(name) }) program.parse(process.argv)可以通過 lq -v 來查看版本號 通過 lq init name 的操作，action里面會打印出name
2.2.3 對console的美工
我們看到taro init 命令里面會有一些顏色標識，就是因為引入了chalk這個包，同樣和 commander 一樣
npm install --save chalk
console.log(chalk.green('init創建'))
這樣會輸出一樣綠色的
2.2.4 模板下載
download-git-repo 支持從 Github下載倉庫，詳細了解可以參考官方文檔。
npm install --save download-git-repo
download() 第一個參數就是倉庫地址,詳細了解可以看官方文檔
2.2.5 命令行的交互
命令行交互功能可以在用戶執行 init 命令后，向用戶提出問題，接收用戶的輸入并作出相應的處理。用 inquirer.js 來實現。
npm install --save inquirer
index.js文件如下
#!/usr/bin/env nodeconst chalk = require('chalk')console.log('Hello, cli!')console.log(chalk.green('init創建'))const program = require('commander')const download = require('download-git-repo')const inquirer = require('inquirer')program .version(require('./package').version, '-v, --version') .command('init <name>') .action((name) => { console.log(name) inquirer.prompt([ { type: 'input', name: 'author', message: '請輸入你的名字' } ]).then((answers) => { console.log(answers.author) download('', name, {clone: true}, (err) => { console.log(err ? 'Error' : 'Success') }) }) })program.parse(process.argv)2.2.6 ora進度顯示
npm install --save ora
相關命令可以如下
const ora = require('ora')// 開始下載const proce = ora('正在下載模板...')proce.start()// 下載失敗調用proce.fail()// 下載成功調用proce.succeed()2.2.6 log-symbols 在信息前面加上 √ 或 × 等的圖標
npm install --save log-symbols
相關命令可以如下
const chalk = require('chalk')const symbols = require('log-symbols')console.log(symbols.success, chalk.green('SUCCESS'))console.log(symbols.error, chalk.red('FAIL'))2.2.7 完整文件如下
#!/usr/bin/env nodeconst chalk = require('chalk')console.log('Hello, cli!')console.log(chalk.green('init創建'))const fs = require('fs')const program = require('commander')const download = require('download-git-repo')const inquirer = require('inquirer')const ora = require('ora')const symbols = require('log-symbols')program .version(require('./package').version, '-v, --version') .command('init <name>') .action((name) => { console.log(name) inquirer.prompt([ { type: 'input', name: 'author', message: '請輸入你的名字' } ]).then((answers) => { console.log(answers.author) const lqProcess = ora('正在創建...') lqProcess.start() download('github:/Mr-Prune/learn/mongodb-koa', name, {clone: true}, (err) => { if (err) { lqProcess.fail() console.log(symbols.error, chalk.red(err)) } else { lqProcess.succeed() const fileName = `${name}/package.json` const meta = { name, author: answers.author } if(fs.existsSync(fileName)){ const content = fs.readFileSync(fileName).toString(); const result = handlebars.compile(content)(meta); fs.writeFileSync(fileName, result); } console.log(symbols.success, chalk.green('創建成gong')) } }) }) })program.parse(process.argv)總結
通過上面的例子只是能夠搭建出一個簡單的腳手架工具，其實bash還可以做很多東西，比如 npm 包優雅地處理標準輸入、管理并行任務、監聽文件、管道流、壓縮、ssh、git等，要想了解更多，就要深入了解，這里只是打開一扇門，學海無涯。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
