自定义创建简易的Vue-cli脚手架工具

简易脚手架项目目录:

本文章用于记录脚手架学习

1.index.js为核心源码
2.templates.js为package.json模板;
3.package.json管理依赖包和命令行;

---

1.index.js源码

#!/usr/bin/env node
// 命令行工具
const program = require('commander')
// 快速克隆指定版本的仓库
const download = require('download-git-repo')
// 模板引擎工具
const handlebars = require('handlebars')
// 向导的方式采集用户输入的值
const inquirer = require('inquirer')
// 文件读取和写入
const fs = require('fs')
// loading工具
const ora = require('ora')
// 显示样式
const chalk = require('chalk')
// 显示图标
const logSymbols = require('log-symbols')
// 模板列表文件,用于查询当前脚手架有什么模板的项目
const templates = require('./templates')

program
  .version('0.1.0') // -v 或者 --version 的时候会输出该版本号

program
  .command('init  [project-name]')
  .description('初始化项目模板')
  .action((templateName, projectName) => {
    console.log(templateName, projectName)
    // loading 提示
    const spinner = ora('正在下载模板...').start()

    // download
    //    第一个参数：仓库地址
    //    第二个参数：下载路径
    const { downloadUrl } = templates[templateName]
    download(downloadUrl, projectName, { clone: true }, (err) => {
      if (err) {
        spinner.fail()
        console.log(logSymbols.error, chalk.red(err))
        return
      }

      spinner.succeed()

      // 使用向导的方式采集用户输入的值
      inquirer.prompt([{
        type: 'input',
        name: 'name',
        message: '请输入项目名称',
        default: projectName
      }, {
        type: 'input',
        name: 'description',
        message: '请输入项目简介'
      }, {
        type: 'input',
        name: 'author',
        message: '请输入作者名称'
      }]).then((answers) => {
        // 把项目下的 package.json 文件读取出来
        const packagePath = `${projectName}/package.json`
        const packageContent = fs.readFileSync(packagePath, 'utf8')

        // 使用模板引擎把用户输入的数据解析到 package.json 文件中
        const packageResult = handlebars.compile(packageContent)(answers)

        // 解析完毕，把解析之后的结果重新写入 package.json 文件中
        fs.writeFileSync(packagePath, packageResult)

        console.log(logSymbols.success, chalk.yellow('初始化模板成功'))
      })
    })
  })

program
  .command('list')
  .description('查看所有可用模板')
  .action(() => {
    for (let key in templates) {
      console.log(`
${key}  ${templates[key].description}`)
    }
  })

// 没有任何命令的时候输出使用帮助
if (!process.argv.slice(2).length) {
  program.outputHelp()
}

program.parse(process.argv)

---

2.template.js源码

module.exports = {
  'tpl-a': {
    url: 'https://github.com/lipengzhou/tpl-a',
    downloadUrl: 'http://github.com:username/tpl-a#master',
    description: 'a模板'
  },
  'tpl-b': {
    url: 'https://github.com/lipengzhou/tpl-b',
    downloadUrl: 'http://github.com:username/tpl-b#master',
    description: 'b模板'
  },
  'tpl-c': {
    url: 'https://github.com/lipengzhou/tpl-c',
    downloadUrl: 'http://github.com:username/tpl-c#master',
    description: 'c模板'
  }
}

---

3.package.json源码

{
"author": "",
  "bin": {
    "itcast": "index.js"
  },
  "bundleDependencies": false,
  "dependencies": {
    "chalk": "^2.4.1",
    "commander": "^2.17.1",
    "download-git-repo": "^1.1.0",
    "handlebars": "^4.0.11",
    "inquirer": "^6.1.0",
    "ora": "^3.0.0"
  },
  "deprecated": false,
  "description": "",
  "keywords": [],
  "license": "ISC",
  "name": "itcast-cli",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "version": "1.0.1"
}

• 当我们配置好这三个文件之后就可以将这个项目发布至npm了,发布至npm之后我们在我们电脑中进行全局安装该插件,这样插件中packages.json中的webFe
  命令行就可以使用了 ,如:

webFe create 模板名 项目名

个人理解:

1. 脚手架项目理解为一个node脚本文件,执行i在node环境下index.js,通过执行预先配置好的命令,选择好指定的模板,从远方克隆指定模板的代码,然后使用收集用户交互的输入来修改克隆下来的项目中的指定文件,最终快速生成vue项目
2. 我们配置的命令不仅可以用来指定版本的模板然后克隆项目至本地,还可以使用指令创建vue项目中的组件并自动生成路由文件和说明文件等等…