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，能够给终端的字体加上色彩。
  • og-symbols，能够在终端上显示出 √ 或 × 等的图标
相干nodejs进阶视频解说进入学习

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')const handlebars = require('handlebars')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(          'direct:https://github.com/Chant-Lee/rick-cli-templates1.git',          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('创立胜利'))            }          }        )      })  })program.parse(process.argv)

总结

通过下面的例子只是可能搭建出一个简略的脚手架工具，其实bash还能够做很多货色，比方 npm 包优雅地解决规范输出、治理并行任务、监听文件、管道流、压缩、ssh、git等，要想理解更多，就要深刻理解，这里只是关上一扇门，学海无涯。

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，能够给终端的字体加上色彩。
  • og-symbols，能够在终端上显示出 √ 或 × 等的图标
相干nodejs进阶视频解说进入学习

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')const handlebars = require('handlebars')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(          'direct:https://github.com/Chant-Lee/rick-cli-templates1.git',          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('创立胜利'))            }          }        )      })  })program.parse(process.argv)

总结

通过下面的例子只是可能搭建出一个简略的脚手架工具，其实bash还能够做很多货色，比方 npm 包优雅地解决规范输出、治理并行任务、监听文件、管道流、压缩、ssh、git等，要想理解更多，就要深刻理解，这里只是关上一扇门，学海无涯。