前言
在上一篇文章從零開始前端腳手架系列(一)中，我們已經做好了前期準備工作，可以實現的功能是在本機的任何目錄下執行simple-cli指令，都會輸出test。本文繼續向下推進，將實現通過輸入不同的指令，執行對應的js腳本；
結構規劃
一般來說，一個最簡單的腳手架將具備以下幾項基本功能：
- 初始化項目；
- 啓動項目；
- 打包項目；
我們的腳手架也將實現這三個功能，指令爲：
simple-cli init //初始化一個項目；
simple-cli start //啓動一個項目；
simple-cli build //打包項目；
首先在cli目錄下建立如下目錄：
cli
├── index.js
└── src
├── clis
│ ├── build.js
│ ├── init.js
│ └── start.js
└── index.js
- 其中cli/index.js爲腳手架的根入口;
- src/index.js用來獲取指令;
- clis下邊的文件爲各指令對應腳本；
爲了測試，我們先在build.js、init.js和start.js下分別export一個函數，函數體分別爲：console.log('build')、console.log('init')、console.log('strat')。
比如build.js文件內容爲：
export default () => { console.log('build') }
至此，我們的腳手架結構基本完成；
配置babel
爲了後邊可以用一些es6的語法，我們還需要在項目入口處配置babel,有關babel的配置文檔很多，這裏不多描述。簡單貼一下cli/index.js的代碼。
#!/usr/bin/env node
require('@babel/polyfill')
require('@babel/core')
require('@babel/register')({
presets: [require.resolve('@babel/preset-env')],
ignore: [],
})
require('./src/index')
指令分發
接下來要實現的是通過輸入的指令執行執行相應的腳本。這裏推薦一個npm包optimist, src/index.js的關鍵代碼如下：
import optimist from 'optimist'
import fs from 'fs'
import path from 'path'
const { argv } = optimist
const commands = argv._ //一個數組，存儲指令的參數
//獲取clis目錄下的文件名稱
const clis = fs.readdirSync(path.resolve(__dirname, 'clis')).map(item => item.replace('.js', ''))
const cmd = clis.indexOf(commands[0]) > -1 ? commands[0] : ''
if (cmd) {
const command = require(`./clis/${cmd}`).default
//process.cwd() 獲取當前指行文件的路徑，後面會用到
argv.cwd = process.cwd()
command(argv)
} else {
console.log('not found')
}
到這裏就可以在命令行執行simple-cli start,simple-cli init,simple-cli build指令。會輸出clis目錄下相應的腳本的console.log內容了。
總結
本篇文章確定了腳手架的基本結構，實現了從命令行輸入內容到執行相應的腳本的功能，那麼關於各個腳本的具體實現，敬請期待後續文章。
源碼地址：https://github.com/keep-run/simple-cli
掃碼關注公衆號，查看更方便
