vuecli脚手架源码解析二

前言：紧接上篇，这篇文章着重讲解 create.js，这是创建项目的主文件。

从上而下，逐行解析。

---

1. 先看依赖文件

    
const fs = require('fs-extra')  // 这个是操作文件的库，node 自带的库需要写很多的 hack
const path = require('path')    // 路径
const chalk = require('chalk')  // console 上色
const inquirer = require('inquirer') // 这个很重要，是命令行交互用的，比如我们创建项目的时候，他会让你选择是否采用 vue-router, 是否使用 vuex。const Creator = require('./Creator') // 这个后面细说
const {clearConsole} = require('./util/clearConsole') // 这个就是 console 一些信息，不重要
const {getPromptModules} = require('./util/createTools') // 这个后面说
const validateProjectName = require('validate-npm-package-name') // 校验包名字，不重要 

1. 重点来看 create 方法，我删除一些不重要的内容

async function create (projectName, options) {
  // projectName 就是我们创建的项目名字，比如 hello-word
  // options 就是我们输入的参数了，例如 -p -f -d

  const cwd = options.cwd || process.cwd()  // 运行脚手架的目录
  const inCurrent = projectName === '.'  // 项目名是否是个.（也可以理解为目录，如果是. 就代表当前目录，不需要创建了）const name = inCurrent ? path.relative('../', cwd) : projectName
  const targetDir = path.resolve(cwd, projectName || '.') // 会创建目录

  const result = validateProjectName(name)  // 校验名字是否合理，例如是否有空格
  // 校验错误流被我删除了，无外乎提示错误。if (fs.existsSync(targetDir)) {   // 目录是否存在
    if (options.force) {       // 参数是否有 -f，如果有就强制删除目录
      await fs.remove(targetDir)
    } else {    // 否则就让用户自己选择，是覆盖啊，合并啊，还是啥的
      await clearConsole()  // 输出一些提示吧，这个不重要
      if (inCurrent) {  // 如果是当前目录创建项目，给个 confirm 提示
        const {ok} = await inquirer.prompt([
          {
            name: 'ok',
            type: 'confirm',
            message: `Generate project in current directory?`
          }
        ])
        if (!ok) {return}
      } else {  /
        const {action} = await inquirer.prompt([
          {
            name: 'action',
            type: 'list',
            message: `Target directory ${chalk.cyan(targetDir)} already exists. Pick an action:`,
            choices: [{ name: 'Overwrite', value: 'overwrite'},
              {name: 'Merge', value: 'merge'},
              {name: 'Cancel', value: false}
            ]
          }
        ])
        if (!action) {return} else if (action === 'overwrite') {console.log(`\nRemoving ${chalk.cyan(targetDir)}...`)
          await fs.remove(targetDir)
        }
      }
    }
  }
  // 总结上面的一堆代码，就是创建一个项目目录，来放代码，如果目录存在是强制删除还是覆盖合并。const creator = new Creator(name, targetDir, getPromptModules()) // 真正创建的代码在这里面去了。// name 就是项目名
  // targetDir 就是 path.resolve(cwd, projectName || '.') 就是目录地址
  // getPromptModules 这个是引入第三方库     
    
  await creator.create(options)  
}

看下 getPromptModules()，他引入了好多的库, 这些库，在用户选择不同的初始化项目的时候用得到。

 return [
    'babel',
    'typescript',
    'pwa',
    'router',
    'vuex',
    'cssPreprocessors',
    'linter',
    'unit',
    'e2e'
  ].map(file => require(`../promptModules/${file}`))

真正的创建看来还是要等到下一篇文章再说了，再重点介绍下 inquirer 这个库。

inquirer 命令行交互的库，比如我们常见的

一个是让你手动输入,y 或者 n，一个是选择。

当所有的交互完成会，会返回一个对象，就是用户选择或者输入的值，后续的输出逻辑就依赖这个值。

const inquirer = require('inquirer');
inquirer.prompt([
    {
        type: 'input',
        message: '请选择是否创建（y/n）',
        name: 'xory',
        default: 'y',
    },
    {
        type: 'list',
        message: '你喜欢什么水果？',
        name: 'xig',
        default: '0',
        choices:['西瓜','苹果','香蕉']
    },
    {
    type: 'input',
    message: '请输入手机号:',
    name: 'phone',
    validate: function(val) {if(val.match(/\d{11}/g)) { // 校验位数
           return true;
        }
        return "请输入 11 位数字";
    }
    }
]).then(answer => {console.log(answer); // answer 就是用户的输入
})

重点的方法就 prompt，prompt 接收一个数组，数组里面是一个配置对象，重点是 type，不同的 type 需要配置不同的数据，比如当 type 是 list 的时候，需要传一个 choices，用于给用户选择。