從零開始構建一個本身的簡易命令行工具~

前言：在平常工做中，無論咱們使用哪一種技術選型，安裝官方CLI工具項目以後都須要從新配置一番基礎配置（好比：less/scss常量及默認引入、ajax封裝、經常使用lib函數、UI框架引入等），耗時且無心義，因此咱們能夠根據本身的需求，構建本身的命令行工具，方便快速建立一個本身風格新項目！

項目結構

前言：在平常工做中，無論咱們使用哪一種技術選型，安裝官方CLI工具項目以後都須要從新配置一番基礎配置（好比：less/scss常量及默認引入、ajax封裝、經常使用lib函數、UI框架引入等），耗時且無心義，因此咱們能夠根據本身的需求，構建本身的命令行工具，方便快速建立一個本身風格新項目！

項目結構

編寫命令入口

1.建立package.json文件，添加一個配置項bin

npm init

複製代碼

"bin": {

    j8: "./bin/j8.js"

}

複製代碼

2.安裝commander、chalk、inquirer、download-git-repo和ora插件

• commander插件：能夠解析用戶輸入的命令

• chalk插件：改變輸出文字的顏色

• inquirer插件：能夠檢出用戶的輸入

• download-git-repo插件：能夠拉取git倉庫的源代碼

• ora插件：小圖標（loading、warn、succeed）美化輸出內容

yarn add commander chalk inquirer download-git-repo ora

複製代碼

3.編寫代碼

#!/usr/bin/env node

const fs = require('fs')

const program = require('commander')

const download = require('download-git-repo') 

const chalk = require('chalk') 

const inquirer = require('inquirer')

const ora = require('ora') 

const package = require('../package')

program

.version(package.version)

.option('-i, init', '初始化j8項目')

.parse(process.argv)



program.parse(process.argv)



const question = [

{

type: 'list',

message: `請選擇項目類型? `,

name: 'type',

choices: ['MPA(多頁應用)', 'Vue', 'React']

},

{

type: 'input',

message: `項目名稱: `,

name: 'name',

default: 'my-project'

},

{

type: 'input',

message: `項目描述: `,

name: 'description',

default: 'Description'

},

{

type: 'input',

message: `初始版本: `,

name: 'version',

default: '0.0.1'

},

{

type: 'input',

message: `server端口: `,

name: 'port',

default: '8080'

},

{

type: 'confirm',

message: `使用pug(jade)模版引擎? `,

name: 'template',

when: answers => answers.type === 'MPA(多頁應用)',

default: true

}

]



if (program.init) {

console.info('')

inquirer.prompt(question).then(function(answers) {

let downloadUrl

if (answers.type === 'MPA(多頁應用)') {

// MPA

downloadUrl = answers.template

? 'xxj95719/multi-page-app'

: 'xxj95719/multi-page-app#html'

} else if (answers.type === 'Vue') {

// Vue

downloadUrl = 'xxj95719/vue-spa'

} else if (answers.type === 'React') {

// React

downloadUrl = 'xxj95719/react-spa'

}

const spinner = ora('正在從github下載...').start()

download(downloadUrl, answers.name, function(err) {

if (!err) {

spinner.clear()

console.info('')

console.info(

chalk.green('-----------------------------------------------------')

)

console.info('')

spinner.succeed(['項目建立成功,請繼續進行如下操做:'])

console.info('')

console.info(chalk.cyan(` - cd ${answers.name}`))

console.info(chalk.cyan(` - npm install / yarn`))

console.info(chalk.cyan(` - npm run dev / yarn dev`))

console.info('')

console.info(chalk.gray(`devServer: http://localhost:${answers.port}`))

console.info('')

console.info(

chalk.gray('參考文檔: https://github.com/xxj95719/j8-cli/')

)

console.info('')

console.info(

chalk.green('-----------------------------------------------------')

)

console.info('')



fs.readFile(

`${process.cwd()}/${answers.name}/package.json`,

(err, data) => {

if (err) throw err

let _data = JSON.parse(data.toString())

_data.name = answers.name

_data.description = answers.description

_data.version = answers.version

_data.port = answers.port

let str = JSON.stringify(_data, null, 4)

fs.writeFile(

`${process.cwd()}/${answers.name}/package.json`,

str,

function(err) {

if (err) throw err

process.exit()

}

)

}

)

} else {

spinner.warn([

'發生錯誤，請在https://github.com/xxj95719/j8-cli/issues，Issues留言'

])

process.exit()

}

})

})

}

複製代碼

3.發佈到npm

• 登陸npm

npm login

複製代碼

• 發佈插件（每次從新發布插件須要更新package.json的版本號，調試階段最好使用npm link開發）

npm publish

複製代碼

結語：經過拉取本身所須要的分支代碼，快速完成基礎項目搭建~。

源碼地址：github.com/xxj95719/j8…