Vue CLI 3.0+ 源码分析：Generate 过程详解

上篇文章分析了 vue create 命令的 preset 创建、依赖安装等初始化过程。本文继续深入核心部分：generate 流程。

在分析 generate 过程之前，我们看看不做 generate 创建的工程项目是什么样的：

只是安装了 cli-plugin-babel、cli-plugin-eslint、cli-service，package.json 只有几个字段。我们再看看实际创建一个可用的项目工程 package.json 长什么样：

差距有点大，接下来看看 generate 过程是怎么做到的。

代码非常简单，处理一下 preset 中的插件，创建一个 Generator 实例，然后执行实例的 generate 方法，我们详细看下整个过程：

1. 处理 preset 中的插件

// { id: options } => [{ id, apply, options }]
async resolvePlugins(rawPlugins, pkg) {
  // ensure cli-service is invoked first
  rawPlugins = sortObject(rawPlugins, ['@vue/cli-service'], true)
  const plugins = []
  for (const id of Object.keys(rawPlugins)) {
    // 加载插件中的 generator.js 文件或/generator/index.js 文件
    const apply = loadModule(`${id}/generator`, this.context) || (() => {})
    let options = rawPlugins[id] || {}
     (options.) {
      
      
       pluginPrompts = (, .)
       (pluginPrompts) {
         prompt = inquirer.()
         ( pluginPrompts === ) {
          pluginPrompts = (pkg, prompt)
        }
         ( pluginPrompts. === ) {
          pluginPrompts = pluginPrompts.(pkg, prompt)
        }
        ()
        ()
        options =  (pluginPrompts)
      }
    }
    plugins.({ id, apply, options })
  }
   plugins
}