一、站在前端研发的视角,分析开发脚手架的必要性

研发效能

  • 开发脚手架的核心目标是:提升前端的研发效能
  • 大厂研发一定需要用到脚手架

脚手架核心价值

将研发过程:

  • 自动化:项目重复代码拷贝/git 操作/发布上线操作
  • 标准化:项目创建/git flow/发布流程/回滚流程
  • 数据化:研发过程系统化、数据化,使得研发过程可量化

和自动化构建的区别

问题:jenkins、Travis 等自动化构建工具已经比较成熟了,为什么还需要自研脚手架?

  • 不满足需求:jenkins,Travis 通常在 git hooks 中触发,需要在服务端执行,无法覆盖研发人员本地的功能:如创建项目自动化、本地 git 操作自动化等、
  • 定制复杂:jenkins、Travis 定制过程需要开发插件,其过程较为复杂,需要使用 java 语言,对前端同学不友好

二、从使用角度理解什么是脚手架?

脚手架简介

脚手架本质是一个操作系统的客户端,它通过命令行执行,比如:

vue create vue-test

上面这条命令由 3 个部分组成:

  • 主命令:vue
  • command(子命令):create
  • command 的 param:vue-test

它表示创建一个 vue 项目,项目名称为 vue-test,以上是最简单的脚手架命令,但实际场景往往更加复杂,比如:
当前项目已经有文件,我们需要覆盖当前目录下的文件,强制进行安装vue项目,此时我们就可以输入

vue create vue-test --force

这里的–force 叫做 option,用来辅助脚手架确认在特定场景下用户的选择(可以理解为配置)。还有一种场景:
通过vue create创建项目时,会自动执行npm install帮助用户安装依赖,如果我们希望使用淘宝源来安装,可以输入命令:

vue create vue-test --force -r https://registry.npm.taobao.org

这里的 -r 也叫做 option,它与--force不同的是它使用 -,并且使用简写,这里的-r也可以替换成-- registry,我们可以通过帮助命令看到vue create支持的所有 options:

vue create --help

脚手架执行原理

  • 终端输入 vue create vue-test
  • 终端解析出vue命令
  • 终端在环境变量中找到vue命令(相当于执行 which vue)
  • 终端根据vue命令链接到实际文件vue.js
  • 终端利用node执行vue.js
  • vue.js 解析 command/options
  • vue.js 执行 command
  • 执行完毕,退出执行
which vue
// /c/Users/lkjjhj/AppData/Local/Yarn/bin/vue

从应用的角度看如何开发一个脚手架

这里以 vue-cli 为例

  • 开发npm项目,该项目中应包含一个 bin/vue.js 文件,并将这个项目发布到 npm
  • npm 项目安装到nodelib/node_modules
  • nodebin 目录下配置 vue 软链接指向 lib/node_modules/@vue/cli/bin/vue.js
    这样我们在执行vue命令的时候就可以找到vue.js进行执行

还有疑问需要解答

  • 为什么全局安装 @vue/cli 后会添加的命令为 vue?
npm install -g @vue/cli
  • 全局安装@vue/cli时发生了什么?

  • 为什么vue指向一个 js 文件,我们却可以通过vue命令去执行它?

三、脚手架的实现原理

脚手架实现原理

如果你能回答以下 3 个问题,就掌握了脚手架的实现原理:

  • 为什么全局安装 @vue/cli 后会添加命令为 vue?
npm install -g @vue/cli

答:在 package.json 中配置 bin

"bin": {
  "vue": "bin/vue.js"
}
  • 全局安装 @vue/cli 时发生了什么?
    答:下载依赖,并配置 bin 命令

  • 执行 vue 命令时发生了什么?为什么 vue 指向一个 js 文件,我们却可以直接通过vue命令去执行它?

脚手架原理进阶

我们继续尝试回答以下 2 个问题?

  • 为什么说脚手架本质是操作系统的客户端?它和我们在 PC 上安装的应用/软件有什么区别?

  • 如何为node脚手架命令创建别名?
    通过软链接创建别名

  • 描述脚手架命令执行的全过程。

#!/usr/bin/env node  // 在环境变量中查找node
#!/usr/bin/node      // 直接执行 usr/bin 目录下的 node

四、脚手架的开发流程

脚手架开发流程详解

开发流程

  • 创建npm项目
  • 创建脚手架入口文件,最上方添加:
#!/usr/bin/env node
  • 配置package.json,添加bin属性
  • 编写脚手架代码
  • 将脚手架发布到 npm

使用流程

  • 安装脚手架
npm install -g best-cli
  • 使用脚手架
best - cli;

脚手架开发难点解析

  • 分包:将复杂的系统拆分成若干模块

  • 命令注册:

vue create
vue add
vue invoke
  • 参数解析:
vue command [options] <params>
  • options 全称:--version--help
  • options 简写:-V-h
  • 带 params 的 options:--path /User/xxx/vue-test
  • 帮助文档:
Usage: vue <command> [options]
Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information
Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment
  Run vue <command> --help for detailed usage of given command.
  • 命令行交互
  • 日志打印
  • 命令行文字变色
  • 网络通信:HTTP/WebSocket
  • 文件处理
  • 等等…

五、下集内容

【02】原生如何开发脚手架?