关于vue-cli4:源码vuecli459三

前言

上文介绍了vue create的大抵过程，上面要介绍vue add和vue invoke的执行过程，其实vue add实质上还是执行vue invoke,只不过多了插件装置的相干逻辑而已

vue create

如果你想在一个曾经被创立好的我的项目中装置一个插件，能够应用 vue add 命令：

program
  .command('add <plugin> [pluginOptions]')
  .description('install a plugin and invoke its generator in an already created project')
  .option('--registry <url>', 'Use specified npm registry when installing dependencies (only for npm)')
  .allowUnknownOption()
  .action((plugin) => {
    
    require('../lib/add')(plugin, minimist(process.argv.slice(3)))
  })

• plugin: 装置的插件名称
• minimist(process.argv.slice(3)): pluginOptions对象

add.js

文件门路: “

module.exports = (...args) => {
  return add(...args).catch(err => {
    error(err)
    if (!process.env.VUE_CLI_TEST) {
      process.exit(1)
    }
  })
}

• add func

/**
  * @param pluginToAdd 待增加插件名称
  * @param pluginToAdd 额定参数
  * @param context 命令行执行门路
  */
async function add (pluginToAdd, options = {}, context = process.cwd()) {
  if (!(await confirmIfGitDirty(context))) {
    return
  }

  // for `vue add` command in 3.x projects
  const servicePkg = loadModule('@vue/cli-service/package.json', context)
  if (servicePkg && semver.satisfies(servicePkg.version, '3.x')) {
    // special internal "plugins"
    if (/^(@vue\/)?router$/.test(pluginToAdd)) {
      return addRouter(context)
    }
    if (/^(@vue\/)?vuex$/.test(pluginToAdd)) {
      return addVuex(context)
    }
  }

  const pluginRe = /^(@?[^@]+)(?:@(.+))?$/
  const [
    // eslint-disable-next-line
    _skip,
    pluginName,
    pluginVersion
  ] = pluginToAdd.match(pluginRe)
  const packageName = resolvePluginId(pluginName)

  log()
  log(`📦  Installing ${chalk.cyan(packageName)}...`)
  log()

  const pm = new PackageManager({ context })

  if (pluginVersion) {
    await pm.add(`${packageName}@${pluginVersion}`)
  } else if (isOfficialPlugin(packageName)) {
    const { latestMinor } = await getVersions()
    await pm.add(`${packageName}@~${latestMinor}`)
  } else {
    await pm.add(packageName, { tilde: true })
  }

  log(`${chalk.green('✔')}  Successfully installed plugin: ${chalk.cyan(packageName)}`)
  log()

  const generatorPath = resolveModule(`${packageName}/generator`, context)
  if (generatorPath) {
    invoke(pluginName, options, context)
  } else {
    log(`Plugin ${packageName} does not have a generator to invoke`)
  }
}

首先执行confirmIfGitDirty办法，它会判断是否为执行命令行门路是否为git仓库，不是则继续执行上面流程，如果是则判断是git仓库，则判断仓库状态是否已提交，如果没有提交则提醒用户。
接下来则是判断@vue/cli-service是否为3.x版本，如果是，则再判断是否为vue add router或vue add vuex去执行装置插件步骤，不过4.0版本开始，router和vuex这个2个cli插件被拆分成@vue/cli-plugin-router与@vue/cli-plugin-vuex，不作为外部的非凡插件。理解即可。
而后就是通过resolvePluginId获取残缺的插件名称。通过上文的提到的PackageManager实例pm来下载插件。接着通过resolveModule办法动态创建require语句来引入插件的generator文件夹。若存在该门路，则间接调用invoke办法执行插件的generator逻辑。而invoke正是vue invoke命令调用的执行函数。

vue-cli插件相干文档

插件的 Generator 局部通常在你想要为我的项目扩大包依赖，创立新的文件或者编辑曾经存在的文件时须要。

在 CLI 插件外部，generator 应该放在 generator.js 或者 generator/index.js 文件中。它将在以下两个场景被调用：

• 我的项目初始创立期间，CLI 插件被作为我的项目创立 preset 的一部分被装置时。
• 当插件在我的项目创立实现和通过 vue add 或者 vue invoke 独自调用被装置时。

具体更多请查看官网

vue invoke

module.exports = (...args) => {
  return invoke(...args).catch(err => {
    error(err)
    if (!process.env.VUE_CLI_TEST) {
      process.exit(1)
    }
  })
}

async function runGenerator (context, plugin, pkg = getPkg(context)) {
  const isTestOrDebug = process.env.VUE_CLI_TEST || process.env.VUE_CLI_DEBUG
  const afterInvokeCbs = []
  const afterAnyInvokeCbs = []

  const generator = new Generator(context, {
    pkg,
    plugins: [plugin],
    files: await readFiles(context),
    afterInvokeCbs,
    afterAnyInvokeCbs,
    invoking: true
  })

  log()
  log(`🚀  Invoking generator for ${plugin.id}...`)
  await generator.generate({
    extractConfigFiles: true,
    checkExisting: true
  })

  const newDeps = generator.pkg.dependencies
  const newDevDeps = generator.pkg.devDependencies
  const depsChanged =
    JSON.stringify(newDeps) !== JSON.stringify(pkg.dependencies) ||
    JSON.stringify(newDevDeps) !== JSON.stringify(pkg.devDependencies)

  if (!isTestOrDebug && depsChanged) {
    log(`📦  Installing additional dependencies...`)
    log()
    const pm = new PackageManager({ context })
    await pm.install()
  }

  if (afterInvokeCbs.length || afterAnyInvokeCbs.length) {
    logWithSpinner('⚓', `Running completion hooks...`)
    for (const cb of afterInvokeCbs) {
      await cb()
    }
    for (const cb of afterAnyInvokeCbs) {
      await cb()
    }
    stopSpinner()
    log()
  }

  log(`${chalk.green('✔')}  Successfully invoked generator for plugin: ${chalk.cyan(plugin.id)}`)
  const changedFiles = getChangedFiles(context)
  if (changedFiles.length) {
    log(`   The following files have been updated / added:\n`)
    log(chalk.red(changedFiles.map(line => `     ${line}`).join('\n')))
    log()
    log(
      `   You should review these changes with ${chalk.cyan(
        'git diff'
      )} and commit them.`
    )
    log()
  }

  generator.printExitLogs()
}

实质上还是生成Generator实例，并调用generator来操作文件。