用 nodejs 搭建脚手架

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 node

console.log('Hello, cli!');

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

npm link
lq

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 node

console.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 node
const 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