您访问的是非正式的站点,不是最新内容哦,请点击这里前往Dnocm ヾ(=゚・゚=)ノ喵♪

若白驹过隙,忽然而已

一点点解析Vue CLI之Create

Nodejs除了赋予前端后端的能力外,还能有各种各样的脚本,极大的简单各种操作。在早期,脚本做的工作大都是生成固定的模版,所以你需要了解的,仅仅生成的项目就够了。然而,随着框架的完善,架构师往往希望通过脚本处理默认的配置或者环境,这样能减少环境差异导致的问题,还能简化升级核心框架的升级,例如Vue CLI做的事。

这时候,我们不得不探一探它的神秘面纱。

这次带来的是Create的原理解析。

Package

怎么看的呢?第一步是寻找package.json文件,它定义了项目所需的依赖以及项目的名称等信息,所以都存这样的文件。CLI的脚本放在bin属性下,它会随着安装放入系统的环境变量中,所以我们可以在任意的位置使用它。

在Vue CLI的项目中,目录结构是奇怪的。一般情况下,最外面的是项目本身,也就是CLI工程,然而它是文档。他的CLI项目放在packages/@vue目录下。

这里做个备注,此时的hash值是7375b12c8e75bd4ddc5f04a475512971e1f2bd04,你们可以看这个位置的源码。

里面的CLI项目很多,不过我这次找的算简单的,在cli的这个项目里,他的package.json如下。

{
  "name": "@vue/cli",
  "version": "3.6.3",
  "description": "Command line interface for rapid Vue.js development",
  "bin": {
    "vue": "bin/vue.js"
  },
  //...
}

bin/vue.js这是所执行的脚本。

vue.js

接下来看一下第一个脚本。

#!/usr/bin/env node
// 定义使用node环境

const minimist = require('minimist')
const program = require('commander')
const loadCommand = require('../lib/util/loadCommand')


program
  .command('create <app-name>')
  .description('create a new project powered by vue-cli-service')
  .option('-p, --preset <presetName>', 'Skip prompts and use saved or remote preset')
  //...more option
  .option('--skipGetStarted', 'Skip displaying "Get started" instructions')
  .action((name, cmd) => {
    const options = cleanArgs(cmd)

    if (minimist(process.argv.slice(3))._.length > 1) {
      console.log(chalk.yellow('\n Info: You provided more than one argument. The first one will be used as the app\'s name, the rest are ignored.'))
    }
    // --git makes commander to default git to true
    if (process.argv.includes('-g') || process.argv.includes('--git')) {
      options.forceGit = true
    }
    require('../lib/create')(name, options)
  })

// commander passes the Command object itself as options,
// extract only actual options into a fresh object.
function cleanArgs (cmd) {
  const args = {}
  cmd.options.forEach(o => {
    const key = camelize(o.long.replace(/^--/, ''))
    // if an option is not present and Command has a method with the same name
    // it should not be copied
    if (typeof cmd[key] !== 'function' && typeof cmd[key] !== 'undefined') {
      args[key] = cmd[key]
    }
  })
  return args
}

上面,我只拷贝了相关代码。

我们可以看到,create命令是通过commander创建的,这是个转换命令行的工具,简单说就是将vue create xxx --a aaa --b vvv这些东西格式化。cleanArgs函数,将program属性想换为配置对象,便于后面的操作

其中process是node的线程也是就是这次命令的线程,它可以用来获取当前目录以及变量等,当然也可以通过它异常结束。比如process.argv.slice(3)这因为在命令行中,第一个变量是自己本身,而vue create分别占据第二第三变量,所需从第四个起。

minimist也是同样,起到格式化的作用,详见它的文档

接下来,它调用../lib/create脚本。

create

第二个脚本

const fs = require('fs-extra')
const path = require('path')
const chalk = require('chalk')
const inquirer = require('inquirer')
const Creator = require('./Creator')
const { clearConsole } = require('./util/clearConsole')
const { getPromptModules } = require('./util/createTools')
const { error, stopSpinner, exit } = require('@vue/cli-shared-utils')
const validateProjectName = require('validate-npm-package-name')

async function create (projectName, options) {
  if (options.proxy) {
    process.env.HTTP_PROXY = options.proxy
  }

  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 (!result.validForNewPackages) {
    console.error(chalk.red(`Invalid project name: "${name}"`))
    result.errors && result.errors.forEach(err => {
      console.error(chalk.red.dim('Error: ' + err))
    })
    result.warnings && result.warnings.forEach(warn => {
      console.error(chalk.red.dim('Warning: ' + warn))
    })
    exit(1)
  }

  if (fs.existsSync(targetDir)) {
    if (options.force) {
      await fs.remove(targetDir)
    } else {
      await clearConsole()
      if (inCurrent) {
        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())
  await creator.create(options)
}

module.exports = (...args) => {
  return create(...args).catch(err => {
    stopSpinner(false) // do not persist
    error(err)
    if (!process.env.VUE_CLI_TEST) {
      process.exit(1)
    }
  })
}

module.exports = (...args) 接受不定参,然后,不管是传入也好调用也好,都是固定的两个参数,不明白这里的目的,偷懒?

这里的代码大部分都是对命令行参数的校验与解析,不存在难点。

最后,通过new Creator(name, targetDir, getPromptModules())创建创建者对象,以及执行create。所以重点在Creator对象中。

Creator

太长了!😖所以这部分不细说了,大体上与之前一致,只不过复杂点。值得一提的是Creator继承了EventEmitter,所以它在创建过程的不同阶段发布事件,根据这个,我们可以拆分着看。

this.emit('creation', { event: 'fetch-remote-preset' })
this.emit('creation', { event: 'creating' })
this.emit('creation', { event: 'git-init' })
this.emit('creation', { event: 'plugins-install' })
this.emit('creation', { event: 'invoking-generators' })
this.emit('creation', { event: 'deps-install' })
this.emit('creation', { event: 'completion-hooks' })
this.emit('creation', { event: 'done' })

一共有以上几个事件,当然,也有可能由于配置原因,某些步骤会跳过。比如设置shouldInitGit为false。

大体上就是这样。唉,这可能是唯一的一篇讲解Vue CLI源码的文章,太忙了(我是后端,后端,后端~~)