像我们熟悉的 vue-cli，taro-cli 等脚手架，只需要输入简单的命令 taro init project，即可快速帮我们生成一个初始项目。在日常开发中，有一个脚手架工具可以用来提高工作效率。

  • 减少重复性的工作，从零创建一个项目和文件。
  • 根据交互动态生成项目结构和配置文件等。
  • 多人协作更为方便，不需要把文件传来传去。

脚手架是怎么样进行构建的呢，我是借助了taro-cli 的思路。

  • 1 想要学习更多和了解更多的人
  • 2 对技术充满热情
  • commander.js，可以自动的解析命令和参数，用于处理用户输入的命令。
  • download-git-repo，下载并提取 git 仓库，用于下载项目模板。
  • Inquirer.js，通用的命令行用户界面集合，用于和用户进行交互。
  • handlebars.js，模板引擎，将用户提交的信息动态填充到文件中。
  • ora，下载过程久的话，可以用于显示下载中的动画效果。
  • chalk，可以给终端的字体加上颜色。
  • og-symbols，可以在终端上显示出 √ 或 × 等的图标

npm 不单单用来管理你的应用和网页的依赖，你还能用它来封装和分发新的 shell 命令。

  1. $ mkdir lq-cli
  2. $ npm init

这时在我们的 lq-cli 项目中有 package.json 文件，然后需要创建一个 JS 文件包含我们的脚本就取名 index.js 吧。
package.json 内容如下

  1. {
  2.   "name": "lq-shell",
  3.   "version": "1.0.0",
  4.   "description": "脚手架搭建",
  5.   "main": "index.js",
  6.   "bin": {
  7.     "lq": "./index.js"
  8.   },
  9.   "scripts": {
  10.     "test": "test"
  11.   },
  12.   "keywords": [
  13.     "cli"
  14.   ],
  15.   "author": "prune",
  16.   "license": "ISC"
  17. }

index.js内容如下

  1. #!/usr/bin/env node
  3. console.log('Hello, cli!');

到这一步就可以简单运行一下这个命令

  1. npm link
  2. lq

npm link 命令可以将一个任意位置的 npm 包链接到全局执行环境，从而在任意位置使用命令行都可以直接运行该 npm 包。
控制台会输出Hello, cli!

前面的一个小节，可以跑一个命令行了，但是我们看到的 taro-cli 中还有一些命令，init初始化项目之类。这个时候 commander 就需要利用起来了。
运行下面的这个命令将会把最新版的 commander 加入 package.json

  1. npm install --save commander

引入 commander 我们将 index.js 做如下修改

  1. #!/usr/bin/env node
  3. console.log('Hello, cli!')
  5. const program = require('commander')
  6. program
  7.   .version(require('./package').version, '-v, --version')    
  8.   .command('init <name>')
  9.   .action((name) => {
  10.       console.log(name)
  11.   })
  13. program.parse(process.argv)

可以通过 lq -v 来查看版本号
通过 lq init name 的操作，action里面会打印出name

我们看到taro init 命令里面会有一些颜色标识，就是因为引入了chalk这个包，同样和 commander 一样

  1. npm install --save chalk

console.log(chalk.green(‘init创建’))

这样会输出一样绿色的

download-git-repo 支持从 Github下载仓库，详细了解可以参考官方文档。

  1. npm install --save download-git-repo

download() 第一个参数就是仓库地址,详细了解可以看官方文档

命令行交互功能可以在用户执行 init 命令后，向用户提出问题，接收用户的输入并作出相应的处理。用 inquirer.js 来实现。

  1. npm install --save inquirer

index.js文件如下

  1. #!/usr/bin/env node
  2. const chalk = require('chalk')
  3. console.log('Hello, cli!')
  4. console.log(chalk.green('init创建'))
  5. const program = require('commander')
  6. const download = require('download-git-repo')
  7. const inquirer = require('inquirer')
  8. program
  9.   .version(require('./package').version, '-v, --version')    
  10.   .command('init <name>')
  11.   .action((name) => {
  12.       console.log(name)
  13.       inquirer.prompt([
  14.         {
  15.             type: 'input',
  16.             name: 'author',
  17.             message: '请输入你的名字'
  18.         }
  19.       ]).then((answers) => {
  20.         console.log(answers.author)
  21.         download('',
  22.           name, {clone: true}, (err) => {
  23.           console.log(err ? 'Error' : 'Success')
  24.         })
  25.       })
  27.   })
  28. program.parse(process.argv)
  1. npm install --save ora

相关命令可以如下

  1. const ora = require('ora')
  2. // 开始下载
  3. const proce = ora('正在下载模板...')
  4. proce.start()
  6. // 下载失败调用
  7. proce.fail()
  9. // 下载成功调用
  10. proce.succeed()
  1. npm install --save log-symbols

相关命令可以如下

  1. const chalk = require('chalk')
  2. const symbols = require('log-symbols')
  3. console.log(symbols.success, chalk.green('SUCCESS'))
  4. console.log(symbols.error, chalk.red('FAIL'))
  1. #!/usr/bin/env node
  2. const chalk = require('chalk')
  3. console.log('Hello, cli!')
  4. console.log(chalk.green('init创建'))
  5. const fs = require('fs')
  6. const program = require('commander')
  7. const download = require('download-git-repo')
  8. const inquirer = require('inquirer')
  9. const ora = require('ora')
  10. const symbols = require('log-symbols')
  11. const handlebars = require('handlebars')
  12. program
  13.   .version(require('./package').version, '-v, --version')
  14.   .command('init <name>')
  15.   .action(name => {
  16.     console.log(name)
  17.     inquirer
  18.       .prompt([
  19.         {
  20.           type: 'input',
  21.           name: 'author',
  22.           message: '请输入你的名字'
  23.         }
  24.       ])
  25.       .then(answers => {
  26.         console.log(answers.author)
  27.         const lqProcess = ora('正在创建...')
  28.         lqProcess.start()
  29.         download(
  30.           'direct:https://github.com/Chant-Lee/rick-cli-templates1.git',
  31.           name,
  32.           { clone: true },
  33.           err => {
  34.             if (err) {
  35.               lqProcess.fail()
  36.               console.log(symbols.error, chalk.red(err))
  37.             } else {
  38.               lqProcess.succeed()
  39.               const fileName = `${name}/package.json`
  40.               const meta = {
  41.                 name,
  42.                 author: answers.author
  43.               }
  44.               if (fs.existsSync(fileName)) {
  45.                 const content = fs.readFileSync(fileName).toString()
  46.                 const result = handlebars.compile(content)(meta)
  47.                 fs.writeFileSync(fileName, result)
  48.               }
  49.               console.log(symbols.success, chalk.green('创建成功'))
  50.             }
  51.           }
  52.         )
  53.       })
  54.   })
  55. program.parse(process.argv)

通过上面的例子只是能够搭建出一个简单的脚手架工具，其实bash还可以做很多东西，比如 npm 包优雅地处理标准输入、管理并行任务、监听文件、管道流、压缩、ssh、git等，要想了解更多，就要深入了解，这里只是打开一扇门，学海无涯。

像我们熟悉的 vue-cli，taro-cli 等脚手架，只需要输入简单的命令 taro init project，即可快速帮我们生成一个初始项目。在日常开发中，有一个脚手架工具可以用来提高工作效率。

  • 减少重复性的工作，从零创建一个项目和文件。
  • 根据交互动态生成项目结构和配置文件等。
  • 多人协作更为方便，不需要把文件传来传去。

脚手架是怎么样进行构建的呢，我是借助了taro-cli 的思路。

  • 1 想要学习更多和了解更多的人
  • 2 对技术充满热情
  • commander.js，可以自动的解析命令和参数，用于处理用户输入的命令。
  • download-git-repo，下载并提取 git 仓库，用于下载项目模板。
  • Inquirer.js，通用的命令行用户界面集合，用于和用户进行交互。
  • handlebars.js，模板引擎，将用户提交的信息动态填充到文件中。
  • ora，下载过程久的话，可以用于显示下载中的动画效果。
  • chalk，可以给终端的字体加上颜色。
  • og-symbols，可以在终端上显示出 √ 或 × 等的图标

npm 不单单用来管理你的应用和网页的依赖，你还能用它来封装和分发新的 shell 命令。

  1. $ mkdir lq-cli
  2. $ npm init

这时在我们的 lq-cli 项目中有 package.json 文件，然后需要创建一个 JS 文件包含我们的脚本就取名 index.js 吧。
package.json 内容如下

  1. {
  2.   "name": "lq-shell",
  3.   "version": "1.0.0",
  4.   "description": "脚手架搭建",
  5.   "main": "index.js",
  6.   "bin": {
  7.     "lq": "./index.js"
  8.   },
  9.   "scripts": {
  10.     "test": "test"
  11.   },
  12.   "keywords": [
  13.     "cli"
  14.   ],
  15.   "author": "prune",
  16.   "license": "ISC"
  17. }

index.js内容如下

  1. #!/usr/bin/env node
  3. console.log('Hello, cli!');

到这一步就可以简单运行一下这个命令

  1. npm link
  2. lq

npm link 命令可以将一个任意位置的 npm 包链接到全局执行环境，从而在任意位置使用命令行都可以直接运行该 npm 包。
控制台会输出Hello, cli!

前面的一个小节，可以跑一个命令行了，但是我们看到的 taro-cli 中还有一些命令，init初始化项目之类。这个时候 commander 就需要利用起来了。
运行下面的这个命令将会把最新版的 commander 加入 package.json

  1. npm install --save commander

引入 commander 我们将 index.js 做如下修改

  1. #!/usr/bin/env node
  3. console.log('Hello, cli!')
  5. const program = require('commander')
  6. program
  7.   .version(require('./package').version, '-v, --version')    
  8.   .command('init <name>')
  9.   .action((name) => {
  10.       console.log(name)
  11.   })
  13. program.parse(process.argv)

可以通过 lq -v 来查看版本号
通过 lq init name 的操作，action里面会打印出name

我们看到taro init 命令里面会有一些颜色标识，就是因为引入了chalk这个包，同样和 commander 一样

  1. npm install --save chalk

console.log(chalk.green(‘init创建’))

这样会输出一样绿色的

download-git-repo 支持从 Github下载仓库，详细了解可以参考官方文档。

  1. npm install --save download-git-repo

download() 第一个参数就是仓库地址,详细了解可以看官方文档

命令行交互功能可以在用户执行 init 命令后，向用户提出问题，接收用户的输入并作出相应的处理。用 inquirer.js 来实现。

  1. npm install --save inquirer

index.js文件如下

  1. #!/usr/bin/env node
  2. const chalk = require('chalk')
  3. console.log('Hello, cli!')
  4. console.log(chalk.green('init创建'))
  5. const program = require('commander')
  6. const download = require('download-git-repo')
  7. const inquirer = require('inquirer')
  8. program
  9.   .version(require('./package').version, '-v, --version')    
  10.   .command('init <name>')
  11.   .action((name) => {
  12.       console.log(name)
  13.       inquirer.prompt([
  14.         {
  15.             type: 'input',
  16.             name: 'author',
  17.             message: '请输入你的名字'
  18.         }
  19.       ]).then((answers) => {
  20.         console.log(answers.author)
  21.         download('',
  22.           name, {clone: true}, (err) => {
  23.           console.log(err ? 'Error' : 'Success')
  24.         })
  25.       })
  27.   })
  28. program.parse(process.argv)
  1. npm install --save ora

相关命令可以如下

  1. const ora = require('ora')
  2. // 开始下载
  3. const proce = ora('正在下载模板...')
  4. proce.start()
  6. // 下载失败调用
  7. proce.fail()
  9. // 下载成功调用
  10. proce.succeed()
  1. npm install --save log-symbols

相关命令可以如下

  1. const chalk = require('chalk')
  2. const symbols = require('log-symbols')
  3. console.log(symbols.success, chalk.green('SUCCESS'))
  4. console.log(symbols.error, chalk.red('FAIL'))
  1. #!/usr/bin/env node
  2. const chalk = require('chalk')
  3. console.log('Hello, cli!')
  4. console.log(chalk.green('init创建'))
  5. const fs = require('fs')
  6. const program = require('commander')
  7. const download = require('download-git-repo')
  8. const inquirer = require('inquirer')
  9. const ora = require('ora')
  10. const symbols = require('log-symbols')
  11. const handlebars = require('handlebars')
  12. program
  13.   .version(require('./package').version, '-v, --version')
  14.   .command('init <name>')
  15.   .action(name => {
  16.     console.log(name)
  17.     inquirer
  18.       .prompt([
  19.         {
  20.           type: 'input',
  21.           name: 'author',
  22.           message: '请输入你的名字'
  23.         }
  24.       ])
  25.       .then(answers => {
  26.         console.log(answers.author)
  27.         const lqProcess = ora('正在创建...')
  28.         lqProcess.start()
  29.         download(
  30.           'direct:https://github.com/Chant-Lee/rick-cli-templates1.git',
  31.           name,
  32.           { clone: true },
  33.           err => {
  34.             if (err) {
  35.               lqProcess.fail()
  36.               console.log(symbols.error, chalk.red(err))
  37.             } else {
  38.               lqProcess.succeed()
  39.               const fileName = `${name}/package.json`
  40.               const meta = {
  41.                 name,
  42.                 author: answers.author
  43.               }
  44.               if (fs.existsSync(fileName)) {
  45.                 const content = fs.readFileSync(fileName).toString()
  46.                 const result = handlebars.compile(content)(meta)
  47.                 fs.writeFileSync(fileName, result)
  48.               }
  49.               console.log(symbols.success, chalk.green('创建成功'))
  50.             }
  51.           }
  52.         )
  53.       })
  54.   })
  55. program.parse(process.argv)

通过上面的例子只是能够搭建出一个简单的脚手架工具，其实bash还可以做很多东西，比如 npm 包优雅地处理标准输入、管理并行任务、监听文件、管道流、压缩、ssh、git等，要想了解更多，就要深入了解，这里只是打开一扇门，学海无涯。

版权声明：本文为coder2028原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/coder2028/p/16737761.html