搭建脚手架

搭建过程

1.创建项目文件夹

mkdir my-cli

2.进入文件夹

cd my-cli

3.创建package.json

yarn init

4.在项目根目录中创建cli.js文件，同时修改package.json文件，添加bin指向的入口文件为cli.js

{
  "name": "my-cli",
  "version": "1.0.0",
  "main": "index.js",
  "bin": "cli.js",
  "license": "MIT"
}

5.安装node交互式命令行工具inquirer和js模板引擎工具ejs

yarn add ejs inquirer

6.创建脚手架输出模板文件templates/index.html

  
  
  
  


  
<%= name %>

7.创建脚手架输出模板文件templates/package.json文件

{
  "name": "<%= name %>",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.19.0"
  }
}

8.编辑cli.js文件

#!/usr/bin/env node
// 注意应用入口文件都要有这个文件头；如果是Linux或MaxOS系统需要修改此文件读写权限为755
// 通过在根目录执行 chmod 755 cli.js 实现修改

/**
 * 脚手架的工作过程
 * 1、通过命令行交互询问用户问题
 * 2、根据用户回答的结果生成文件
 */
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const ejs = require('ejs')

inquirer
  .prompt([
    // 用户输入项目名称
    {
      type: 'input',
      name: 'name',
      message: 'Project name?',
    },
    // 通过用户输入判断是否需要生成package.json文件
    {
      type: 'confirm',
      name: 'showPackage',
      message: 'Do you need package.json?',
      default: true,
    },
  ])
  .then((answers) => {
    const {name, showPackage} = answers
    // 模板目录
    const tmpDir = path.join(__dirname, 'templates')
    // 目标目录
    const destDir = process.cwd()
    // 将模板下文件全部转换到目标目录
    fs.readdir(tmpDir, (err, files) => {
      if (err) throw err
      // 根据项目名称创建项目文件夹
      fs.mkdir(name, function (error) {
        if (error) throw err
        files.forEach((file) => {
          // 如果用户选择不需要package.json则不生成该文件
          if (file !== 'package.json' || showPackage) {
            // 通过模板引擎渲染文件
            ejs.renderFile(path.join(tmpDir, file), answers, (err, result) => {
              if (err) throw err
              // 将结果写入目标文件
              fs.writeFileSync(
                path.join(path.join(destDir, name), file),
                result
              )
            })
          }
        })
      })
    })
  })

9.在项目根目录执行chmod命令修改cli.js文件权限为755

chmod 755 cli.js

10.在项目根目录执行yarn link全局注册my-cli脚手架

yarn link

11.测试一下，在需要创建项目的文件下执行my-cli命令

my-cli

image.png

接着我们能看到test文件夹下自动生成了first文件

image.png