介绍

在脚手架入门版我们了解到了脚手架的作用好处以及开发一个脚手架的基本套路，那么在脚手架进阶版我会带着大家一起来探索下vue官方版脚手架vue-cli实现的核心主要逻辑，以便我们在脚手架高级版中能够融会贯通的实现我们自己想要的功能。ok, 接下来首先看下脚手架进阶版的目录树。

进阶版项目目录树

  1. coo-cli2
  2. ├─README.md
  3. ├─index.js // 入口文件
  4. ├─package.json
  5. ├─lib
  6. |  ├─utils
  7. |  |   ├─executeCommand.js
  8. |  |   ├─normalizeFilePaths.js // 斜杠转义
  9. |  |   ├─waitFnLoading.js
  10. |  |   ├─writeFileTree.js // 写入文件
  11. |  |   ├─codemods // AST注入
  12. |  |   |    ├─injectImports.js
  13. |  |   |    └injectOptions.js
  14. |  ├─promptModules // 各个模块的向导提示语
  15. |  |       ├─babel.js
  16. |  |       ├─linter.js
  17. |  |       ├─router.js
  18. |  |       └vuex.js
  19. |  ├─linkConfig
  20. |  |     └vue-repo.js
  21. |  ├─generator // 当前生成项目的功能模版
  22. |  |     ├─webpack
  23. |  |     ├─vuex
  24. |  |     ├─vue
  25. |  |     ├─router
  26. |  |     ├─linter
  27. |  |     ├─babel
  28. |  ├─core
  29. |  |  ├─Creator.js // 创建交互提示类函数
  30. |  |  ├─Generator.js // 项目生成构类函数
  31. |  |  ├─PromptModuleAPI.js // 交互提示注入类函数
  32. |  |  ├─create.js
  33. |  |  ├─help.js
  34. |  |  ├─actions
  35. |  |  |    ├─createProject.js
  36. |  |  |    ├─index.js
  37. |  |  |    └initTemplate.js // 初始模版脚本

coo init <项目名>命令实现的主要功能（进阶版）

  • 多个功能模块的交互提示
  • 按需注入依赖
  • 模板文件渲染
  • AST解析生成
  • 下载依赖
  • 启动项目

下面我们就按照这个功能实现顺序逐个进行学习。
建议结合项目源码一起配合阅读本文，效果更好。cli-learn(opens new window)，当前项目分支 v2
进阶 - 图1

注册 init 命令

  1. const program = require('commander')
  2. const { createProjectAction, initTemplateAction } = require('./actions')
  4. program
  5.   .command('init <project-template> [others...]')
  6.   .description('copy a mini cli just like vue-cli')
  7.   .action(initTemplateAction)

首先我们需要在/lib/core/create.js中新增注册init命令，命令行解析如何实现请移步脚手架入门版(opens new window)，这里不再赘述。在上面的代码，我们可以看到init命令实现的主要行为逻辑是在initTemplateAction函数中，所以我们接下来学习的重点主要是看这个函数做了哪些事情。

功能模块交互

在脚手架入门版我们也实现了一个简单的用户交互，就是为用户提供包管理工具（yarn or npm）的选择向导，我们也了解了实现这个交互功能主要是使用inquirer(opens new window)库。那么在脚手架进阶版的学习当中，我们依然使用这个库为用户提供功能模块的交互向导。这次相比与脚手架入门版实现的简单交互不同，脚手架进阶版提供了vuex、router、linter、babel多个功能模块供用户选择，所以我们把每个模块的交互提示语统一归类在了/lib/promptModules文件夹中，如下：

  1. |  ├─promptModules // 各个模块的向导提示语
  2. |  |       ├─babel.js
  3. |  |       ├─linter.js
  4. |  |       ├─router.js
  5. |  |       └vuex.js

这个部分我们重点学习如何实现将/lib/promptModules下的多个交互提示语弹出供用户选择。
位置：/lib/core/actions/initTemplate.js

  1. const path = require('path')
  2. const inquirer = require('inquirer')
  3. // 创建交互提示构造类
  4. const Creator = require('../Creator')
  5. // 交互提示注入构造类
  6. const PromptModuleAPI = require('../PromptModuleAPI')
  7. const waitFnLoading = require('../../utils/waitFnLoading')
  9. // 初始化vue模板
  10. const initTemplate = async (project) => {
  11.   const creator = new Creator()
  12.   const promptModules = getPromptModules()
  13.   const promptAPI = new PromptModuleAPI(creator)
  14.   promptModules.forEach(m => m(promptAPI))
  16.   // console.dir(creator.getFinalPrompts(), '已获取所有模块的交互提示语');
  18.   // 为用户提供问题向导
  19.   const answers = await inquirer.prompt(creator.getFinalPrompts())
  20. }
  22. // 批量导入模块
  23. function getPromptModules () {
  24.   return [
  25.     'babel',
  26.     'router',
  27.     'vuex',
  28.     'linter',
  29.   ].map(file => require(`../../promptModules/${file}`))
  30. }
  32. module.exports = initTemplate

上述代码，我们重点关注下Creator类，PromptModuleAPI类，和/lib/promptModules目录下的各个文件。

Creator类

位置： /lib/core/Creator.js

  1. class Creator {
  2.   constructor() {
  3.     this.featurePrompt = {
  4.       name: 'features',
  5.       message: 'Check the features needed for your project:',
  6.       pageSize: 10,
  7.       type: 'checkbox',
  8.       choices: [],
  9.     }
  11.     this.injectedPrompts = []
  12.   }
  14.   // 获取所有交互提示语
  15.   getFinalPrompts () {
  16.     this.injectedPrompts.forEach(prompt => {
  17.       const originalWhen = prompt.when || (() => true)
  18.       prompt.when = answers => originalWhen(answers)
  19.     })
  21.     const prompts = [
  22.       this.featurePrompt,
  23.       ...this.injectedPrompts,
  24.     ]
  26.     return prompts
  27.   }
  28. }
  30. module.exports = Creator

简单说下这个类的实现，初始化featurePrompt对象，这个对象就是未来要传入iquirer.prompt方法的交互参数，type类型为checkbox，说明这里是复选项。初始化injectedPrompts空数组，在说这个数组的作用之前，需要先补充关于inquirer库的另一个功能，就是它还可以提供具有相关性的问题，通俗讲就是下一个问题是否弹出要根据上一个问题选择的答案来决定。举个🌰：

  1. {
  2.       name: 'Router',
  3.     value: 'router',
  4.     description: 'Structure the app with dynamic pages',
  5.     link: 'https://router.vuejs.org/',
  6. },
  7. {
  8.       name: 'historyMode',
  9.     when: answers => answers.features.includes('router'),
  10.     type: 'confirm',
  11.     message: `Use history mode for router? ${chalk.yellow(`(Requires proper server setup for index fallback in production)`)}`,
  12.       description: `By using the HTML5 History API, the URLs don't need the '#' character anymore.`,
  13.     link: 'https://router.vuejs.org/guide/essentials/history-mode.html',
  14. }

第二个问题对象中有一个when属性，该属性值是一个函数answers => answers.features.includes(‘router’)。如果函数的执行结果为true，那么第二个问题才会弹出。也就是你在上一个问题中选择了router的话，它的结果就会变为true。弹出第二个问题：Use history mode for router?…。
ok, 了解了这个功能后，我们就可以用这个空数组injectedPrompts来存放一些具有相关性问题（有when属性）的提示语了。Creator类做的最后一件事就是通过getFinalPrompts方法对数组injectedPrompts遍历，实现对命中相关性提示语和普通提示语的一个合并返回。

PromptModuleAPI类

位置：/lib/core/PromptModuleAPI.js

  1. module.exports = class PromptModuleAPI {
  2.   constructor(creator) {
  3.     this.creator = creator
  4.   }
  6.   injectFeature (feature) {
  7.     this.creator.featurePrompt.choices.push(feature)
  8.   }
  10.   injectPrompt (prompt) {
  11.     this.creator.injectedPrompts.push(prompt)
  12.   }
  13. }

PromptModuleAPI类的实现很简单，首先接收一个creator参数赋值，这里的参数creator就是我们刚刚上部分提到的Creator类的实例化。该类内部注册了两个方法，分别是injectFeature用来push普通提示语、injectPrompt用来push相关性提示语。

/lib/promptModules下的文件

上文也已经提到过，/lib/promptModules下的文件主要是各个功能模块的交互提示语，如下：

  1. |  ├─promptModules // 各个模块的向导提示语
  2. |  |       ├─babel.js
  3. |  |       ├─linter.js // eslint
  4. |  |       ├─router.js
  5. |  |       └vuex.js

这里我们就拿一个既有普通提示语也有相关性提示语的router.js举例：

  1. const chalk = require('chalk')
  3. module.exports = (api) => {
  4.   api.injectFeature({
  5.     name: 'Router',
  6.     value: 'router',
  7.     description: 'Structure the app with dynamic pages',
  8.     link: 'https://router.vuejs.org/',
  9.   })
  11.   api.injectPrompt({
  12.     name: 'historyMode',
  13.     when: answers => answers.features.includes('router'),
  14.     type: 'confirm',
  15.     message: `Use history mode for router? ${chalk.yellow(`(Requires proper server setup for index fallback in production)`)}`,
  16.     description: `By using the HTML5 History API, the URLs don't need the '#' character anymore.`,
  17.     link: 'https://router.vuejs.org/guide/essentials/history-mode.html',
  18.   })
  19. }

这里导出一个函数，在getPromptModules方法中通过数组的map方法包装后返回数组函数，对其进行遍历，遍历的每一项m就是这里导出的函数，它的参数为PromptModuleAPI类的实例化，即导出函数的参数api为new PromptModuleAPI()，核心代码如下：
位置：/lib/core/actions/initTemplate.js

  1. // 创建交互提示构造类
  2. const Creator = require('../Creator')
  3. // 交互提示注入构造类
  4. const PromptModuleAPI = require('../PromptModuleAPI')
  6. // 初始化vue模板
  7. const initTemplate = async (project) => {
  8.   const creator = new Creator()
  9.   const promptModules = getPromptModules()
  10.   const promptAPI = new PromptModuleAPI(creator)
  11.   promptModules.forEach(m => m(promptAPI))
  12. }
  14. // 批量导入模块
  15. function getPromptModules () {
  16.   return [
  17.     'babel',
  18.     'router',
  19.     'vuex',
  20.     'linter',
  21.   ].map(file => require(`../../promptModules/${file}`))
  22. }
  24. module.exports = initTemplate

针对上述代码逻辑，用流程图总结一下： 进阶 - 图2 到这里，creator.getFinalPrompts方法就可以把/lib/promptModules下的所有模块提示语获取到，并以数组的形式返回，作为inquirer.prompt方法的入参。

  1. // 为用户提供问题向导
  2. const answers = await inquirer.prompt(creator.getFinalPrompts())

效果如下： 进阶 - 图3
所有功能都选上，answers的值为： 进阶 - 图4

依赖注入

在脚手架入门版中，我们是使用download-git-repo(opens new window)这个库传入remote url的形式直接从远程拉取项目到本地，没有涉及到按需依赖注入的需求，那么在脚手架进阶版中我们也做到像vue-cli那样根据用户的选择来进行相对应模板及依赖的注入。ok，接下来我们就开始学习如何实现模板依赖注入到项目中。
依赖注入本质就是把用户选择的所有功能同我们项目中预设好的模板关联，向package.json中的属性赋值。
那么首先我们需要定义一个变量pkg来表示package.json文件，并设定一些默认值。

  1. // package.json 文件内容
  2. const pkg = {
  3.   name: project,
  4.   version: '0.1.0',
  5.   dependencies: {},
  6.   devDependencies: {},
  7. }

项目中预设好的模板都放在/lib/generator

  1. |  ├─generator // 当前生成项目的功能模版
  2. |  |     ├─webpack // webpack 模板
  3. |  |     ├─vuex // vuex 模板
  4. |  |     ├─vue // vue 模板
  5. |  |     ├─router // vue-router 模板
  6. |  |     ├─linter // eslint 模板
  7. |  |     ├─babel // babel 模板
  • 依赖选项同模版关联

在上一小节中，我们可以知道用户选择了哪些依赖项，这样就可以通过遍历依赖项数组features来获取对应的模版。如下代码：
位置： /lib/core/actions/initTemplate.js

  1. const Generator = require('../Generator')
  2. const generator = new Generator(pkg, path.join(process.cwd(), project))
  4. // 由于这是一个 vue 相关的脚手架，所以 vue 模板应该是默认提供的，不需要用户选择。
  5. // 另外构建工具 webpack 提供了开发环境和打包的功能，也是必需的，不需要用户选择。
  6. // 所以在遍历之前我们需要手动把这两个默认依赖加入到依赖项数组中即可。
  7. answers.features.unshift('vue', 'webpack')
  9. // 根据用户选择的选项加载相应的模块，在 package.json 写入对应的依赖项
  10. answers.features.forEach(feature => {
  11.   require(`../../generator/${feature}`)(generator, answers)
  12. })

这样我们就已经做好了模板关联。

  • 向package.json中的属性赋值

这一步主要是通过 require(../../generator/${feature})(generator, answers) 来导入一个函数并执行，实现属性赋值。以/lib/generator下的babel模板代码为例：

  1. module.exports = (generator) => {
  2.   generator.extendPackage({
  3.     babel: {
  4.       presets: ['@babel/preset-env'],
  5.     },
  6.     dependencies: {
  7.       'core-js': '^3.8.3',
  8.     },
  9.     devDependencies: {
  10.       '@babel/core': '^7.12.13',
  11.       '@babel/preset-env': '^7.12.13',
  12.       'babel-loader': '^8.2.2',
  13.     },
  14.   })
  15. }

可以看到，这里导出一个函数，模板内调用了传进来的 new Generator(pkg, path.join(process.cwd(), project)) 实例的extendPackage()方法向pkg变量注入了babel相关的所有依赖。

  1. // 向 pkg 变量注入模版相关的所有依赖
  2. extendPackage (fields) {
  3.   const pkg = this.pkg
  4.   for (const key in fields) {
  5.     const value = fields[key]
  6.     const existing = pkg[key]
  7.     if (isObject(value) && (key === 'dependencies' || key === 'devDependencies' || key === 'scripts')) {
  8.       pkg[key] = Object.assign(existing || {}, value)
  9.     } else {
  10.       pkg[key] = value
  11.     }
  12.   }
  13. }

模板渲染

这部分我们重点来学习下脚手架是如何解析渲染模板的。所谓的模板，上面也已经提到，主要是放在/lib/generator中。解析渲染模版的主要逻辑在/lib/core/Generator.js中。
模板我们就拿router为例，这里假设用户选择了vue-router，并选了history模式，如下注入代码：

  1. module.exports = (generator, options = {}) => {
  2.   // 向入口文件 `src/main.js` 注入代码 import router from './router'
  3.   generator.injectImports(generator.entryFile, `import router from './router'`)
  5.   // 向入口文件 `src/main.js` 的 new Vue() 注入选项 router
  6.   generator.injectRootOptions(generator.entryFile, `router`)
  8.   generator.extendPackage({
  9.     dependencies: {
  10.       'vue-router': '^3.5.1',
  11.     },
  12.   })
  14.   generator.render('./template', {
  15.     historyMode: options.historyMode,
  16.     hasTypeScript: false,
  17.     plugins: [],
  18.   })
  19. }

可以看到，模板调用generator对象的injectImports方法向入口文件src/main.js注入代码import router from ‘./router’，调用injectRootOptions方法向入口文件src/main.js的new Vue()注入选项router，由于这两个方法做的事情的本质都是一样，都是向一个对象中添加属性值，所以我们这里拿injectImports方法简单看一下。如下代码：

  1. /**
  2.  * Add import statements to a file.
  3.  * 
  4.  * injectImports(file: `src/main.js`, imports: `import store from './store'`)
  5.  * 
  6.  * imports: {
  7.  *  './src/main.js': Set{0: `import store from './store'`}
  8.  * }
  9.  */
  10. injectImports (file, imports) {
  11.   const _imports = (
  12.     this.imports[file]
  13.     || (this.imports[file] = new Set())
  14.   );
  15.   (Array.isArray(imports) ? imports : [imports]).forEach(imp => {
  16.     _imports.add(imp)
  17.   })
  18. }

接下来我们看下generator.render(‘./template’, {})方法主要做的事情：

  1. 使用globby(opens new window)解析读取模板渲染路径./template下的所有文件 ```css const _files = await globby([‘/*’], { cwd: source, dot: true }) / router模板
    • _files: [
    • ‘src/App.vue’,
  • ‘src/router/index.js’, ‘src/views/About.vue’, ‘src/views/Home.png’
    • ] */ ```
  1. 遍历所有读取的文件。如果是二进制文件，直接读取文件内容返回。否则先读取文件内容，再调用ejs进行渲染 ```css for (const rawPath of _files) { const sourcePath = path.resolve(source, rawPath) //sourcePath: /Users/erwin/Desktop/脚手架/coo-cli2/lib/generator/router/template/* // 解析文件内容 const content = this.renderFile(sourcePath, data, ejsOptions) // only set file if it’s not all whitespace, or is a Buffer (binary files) if (Buffer.isBuffer(content) || /[^\s]/.test(content)) { files[rawPath] = content } }

renderFile (pathName, data, ejsOptions) { // 如果是二进制文件，直接将读取结果返回 if (isBinaryFileSync(pathName)) { return fs.readFileSync(pathName) // return buffer }

// 返回文件内容 const template = fs.readFileSync(pathName, ‘utf-8’) return ejs.render(template, data, ejsOptions) }

  1. 这里简单说下使用ejs渲染模板的好处，就是它可以通过变量来判断是否要渲染某段代码，例如模板router 中的index.js的这段代码：
  2. ```css
  3. const router = new VueRouter({
  4.   <%_ if (historyMode) { _%>
  5.   mode: 'history',
  6.   <%_ } _%>
  7.   routes
  8. })

ejs就可以根据用户是否选择history模式来决定是否渲染mode: ‘history’。这里的historyMode是在调用render方法传入

  1. generator.render('./template', {
  2.   historyMode: options.historyMode,
  3.   hasTypeScript: false,
  4.   plugins: [],
  5. })

然后通过调用ejs.render(template, data, ejsOptions)方法的第二个参数data来进行模板渲染。

  1. renderFile (pathName, data, ejsOptions) {
  2.   // 如果是二进制文件，直接将读取结果返回
  3.   if (isBinaryFileSync(pathName)) {
  4.     return fs.readFileSync(pathName) // return buffer
  5.   }
  7.   // 返回文件内容
  8.   const template = fs.readFileSync(pathName, 'utf-8')
  9.   return ejs.render(template, data, ejsOptions)
  10. }
  1. 将ejs渲染好的内容作为 value，赋值给files对象的 key
    1. // 文件渲染
    2. const content = this.renderFile(sourcePath, data, ejsOptions)
    3. // only set file if it's not all whitespace, or is a Buffer (binary files)
    4. if (Buffer.isBuffer(content) || /[^\s]/.test(content)) {
    5. files[rawPath] = content
    6. }

    AST解析生成

    ```css await generator.generate()

// 生成模版文件 async generate () { // 解析文件内容 await this.resolveFiles()

this.files[‘package.json’] = JSON.stringify(this.pkg, null, 2) + ‘\n’ // 将所有文件写入到用户要创建的目录 // context: /Users/erwin/Desktop/脚手架/my-project await writeFileTree(this.context, this.files) }

  1. 这个小结，主要是将前面所有遍历出来的模板文件（包括默认模板文件（vue、webpack）和用户选择的模板文件（babel、linter、router、vuex））对入口文件/src/main.js进行属性取值后，通过vue-codemod配合[jscodeshift(opens new window)](https://github.com/facebook/jscodeshift)转成AST，进行注入，最后返回一个注入好的文件内容赋值给属性/src/main.js。代码如下：
  2. ```css
  3. // vue-codemod 库，对代码进行解析得到 AST，再将 import 语句和根选项注入
  4. // 处理 import 语句的导入
  5. Object.keys(files).forEach(file => {
  6.   let imports = this.imports[file] // 对vue模板下的src/main.js进行属性取值
  7.   imports = imports instanceof Set ? Array.from(imports) : imports
  8.   if (imports && imports.length > 0) {
  9.     // 将 import 语句注入到 src/main.js入口文件中
  10.     files[file] = runTransformation(
  11.       { path: file, source: files[file] }, // source: src/main.js源文件
  12.       require('../utils/codemods/injectImports'),
  13.       { imports }, // imports: [`import router from './router'`]
  14.     )
  15.   }
  16. }

渲染好的模板文件和package.json文件通过writeFileTree方法在本地进行写入。
位置：/lib/core/utils/writeFileTree.js

  1. const fs = require('fs-extra')
  2. const path = require('path')
  4. module.exports = async function writeFileTree (dir, files) {
  5.   Object.keys(files).forEach((name) => {
  6.     const filePath = path.join(dir, name)
  7.     fs.ensureDirSync(path.dirname(filePath))
  8.     fs.writeFileSync(filePath, files[name])
  9.   })
  10. }

这段代码的逻辑如下：

  1. 遍历所有渲染好的文件，逐一生成。
  2. 在生成一个文件时，确认它的父目录在不在，如果不在，就先生成父目录。
    例如现在一个文件的路径为src/main.js，第一次写入时，由于还没有src目录，所以会先生成src目录，再生成main.js文件。
  3. 写入文件。

    下载依赖并启动项目

    ``css // 下载依赖 await waitFnLoading(commandSpawn, 'installing packages...')('npm', ['install'], { cwd:./${project}` })

// 启动项目 await commandSpawn(‘npm’, [‘run’, ‘dev’], { cwd: ./${project} }) ``` 这个功能在脚手架入门版已实现，具体了解请移步脚手架入门版(opens new window)，这里不再赘述。
项目运行效果：
进阶 - 图5
项目运行成功目录截图：
进阶 - 图6

总结 🎉

脚手架进阶版相比入门版，虽然内容多了不少，但其实整体架构也不是很难，这也是vue-cli脚手架实现的核心主要部分，希望可以帮助大家探究自己工作当中最常用的vue脚手架的实现和开发思想。接下来，在脚手架高级版中，我会继续带大家借助vue-cli的实现思想开发一些工作当中实用的脚手指令，帮助大家提高开发效率～
参考资料：