2-1 脚手架开发入门

1 一周导读

1.1 收获

• 脚手架的实现原理
• Lerna 的常见用法
• 架构设计技巧和架构图绘制方法

1.2 主要内容

• 学习如何以架构师的角度思考基础架构问题
• 多 Package 项目管理痛点和解决方案，基于 Lerna 脚手架框架搭建
• imooc-cli 脚手架需求分析和架构设计，架构设计图

1.3 附赠内容

• 脚手架调试技巧
• Lerna 源码分析
• Node 的 module 模块分析
• yargs 使用方法
• 剖析 Lerna 架构设计

1.4 关键词

• 脚手架 - 掌握脚手架原理和开发全流程
• Lerna - 解决多 Package 项目管理痛点
• 架构设计 - 学习大厂基础架构设计思路

1.5 学习方法

• 架构三部曲: 掌握原理 -> 独立思考 -> 总结反思
• 深度剖析优秀开源项目，由表及里，由浅入深
• 视角切换: 多切换到架构师视角，从全局思考问题

2 脚手架开发入门

• 知识脉络和难点解析
  1. 站在前端研发的视角，分析开发脚手架的必要性
  2. 从使用角度理解什么是脚手架
  3. 脚手架的实现原理 -- 难度
  4. 脚手架的开发流程

2.1 站在前端研发的视角，分析开发脚手架的必要性

1. 研发效能

• 核心目标：提升前端研发效能

2. 脚手架核心价值

将研发过程：

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

3. 和自动化构建工具区别

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

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

2.2 从使用角度理解什么是脚手架

1. 脚手架简介

• 脚手架本质是一个操作系统的客户端，它通过命令行执行

vue create vue-test-app --force -r
// 主命令 command command的param [option [option的param] ]

2. 脚手架的执行原理

1. 在终端输入 vue create vue-test-app
2. 终端解析出 vue 命令
3. 终端在环境变量中找到 vue 命令
4. 终端根据 vue 命令链接到实际文件 vue.js
5. 终端利用 node 执行 vue.js
6. vue.js 解析 command/options
7. vue.js 执行 command
8. 执行完毕，退出执行

3. 从应用的角度看如果实现脚手架开发

以 vue-cli 为例

• 开发 npm 项目，该项目中应包含一个 bin/vuejs 文件，并将这个项目发布到 npm
• 将 npm 项目安装到 node 的 lib/node_modules
• 在 node 的 bin 目录下配置 vue 软链接指向 lib/node_modules/@vue/cli/bin/vue.js

这样我们在执行 vue 命令时就可以找到 vue.js 进行执行

2.3 脚手架的实现原理

1. 实现原理

1. 为什么全局安装 @vue/cli 后会添加的命令为vue

2. 全局安装 @vue/cli 时发生了什么?

   1. 下载依赖
   2. node/bin 目录下配置软链接 vue ->

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

   • #!/usr/bin/env node

2. 实现原理 -- 进阶

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

• node 本身是一个执行文件
• node test.js 将 test.js（参数） 执行

2. 如何为 node 脚手架命令创建别名?

   • 软链接嵌套
   • mklink /D <软链接目录> <源目录>

3. 描述脚手架命令执行的全过程

2.4 脚手架的开发流程和难点解析

1. 开发流程

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

2. 使用流程

• 安装 npm install -g your-own-cli
• 使用 your-own-cli

3. 脚手架开发难点

• 分包：将复杂的系统拆分成若干个模块
• 命令注册
  • vue create
  • vue add
• 参数解析
  • vue command [options] <params>
• 帮助文档：

  • global help

    • usage
    • Options
    • Commands

    vue 的帮助信息 -- Usage: vue <command> [options]

  • command help

    vue create 的帮助信息 -- Usage: create <options> [app-name]

2.5 快速入门第一个脚手架

1. md zmoon-test 创建文件夹
2. npm init -y 初始化 npm 项目
3. bin > index.js 文件

4. 配置 package.json，添加 bin 属性编写脚手架代码

5. 将脚手架发布到 npm

   npm login
npm publish

2.6 脚手架本地 link 标准流程

1. 本地调试链接

1. npm link
2. zmoon-test

2. 双包本地调试链接

zmoon-test zmoon-test-lib

方法一

1. zmoon-test-lib> npm link

   • C:\Users\Administrator\AppData\Roaming\npm\node_modules\zmoon-test-lib -> D:\myNote\前端架构师\src\zmoon-test-lib

2. zmoon-test> npm link zmoon-test-lib

   • D:\myNote\前端架构师\src\zmoon-test\node_modules\zmoon-test-lib -> C:\Users\Administrator\AppData\Roaming\npm

3. zmoon-test> zmoon-test

   • verify that the package.json has a valid "main" entry
   • 修改 zmoon-test-lib > package.json -- "main": "lib/index.js",

方法二

1. zmoon-test-lib> npm publish
2. zmoon-test> npm i
3. zmoon-test> npm link zmoon-test-lib

3. 总结

• 链接本地脚手架

cd your-cli-dir
npm link

• 链接本地库文件

cd your-lib-dir
npm link
cd your-cli-dir
npm link your-lib

• 取消链接本地库文件

cd your-lib-dir
npm unlink
cd your-cli-dir
# link存在
npm unlink your-lib
# link不存在
rm -rf node_modules
npm i -S your-lib

• 理解 npm link：
  • npm link your-lib：将当前项目中 node_modules 下指定的库文件链接到 node 全局 node_modules 下的库文件
  • npm link：将当前项目链接到 node 全局 node_modules 中作为一个库文件，并解析 bin 配置创建可执行文件
• 理解 npm unlink：
  • npm unlink：将当前项目从 node 全局 node_modules 中移除
  • npm unlink your-lib：将当前项目中的库文件依赖移除

2.7 脚手架命令注册和参数解析

1. 实现命令注册

注册一个命令 zmoon-test init

const lib = require('zmoon-test-lib')
const argv = require('process').argv

const command = argv[2]
// zmoon-test init -- init

const options = argv.slice(3) 
// zmoon-test init --name vue-test -- [--name, vue-test]

if(options.length > 1) {
  let [option, param] = options

  option = option.replace('--', '')

  if(command) {
    if(lib[command]) {
      lib[command]({ option, param})
    } else {
      console.log('无效的命令')
    } 
  } else {
    console.log('请输入命令')
  }
}

2. 实现参数解析

实现参数解析 --version

if(command.startsWith('--') || command.startsWith('-')) {
  const globalOption = command.replace(/--|-/g, '')
  if(globalOption == 'version' || globalOption == 'V') {
    console.log('^1.0.0')
  }
}

2.8 脚手架项目发布

先发布 lib 包

1. 通过 npm unlink -- 解除 lib 包本地链接，才能实现远程测试
2. 发布 lib 包：npm publish
3. 通过 npm unlink -- 解除 zmoon-test 包本地链接，才能实现远程测试
4. 通过 npm unlink zmoon-test-lib -- 解除 zmoon-test 与 lib 包本地链接，才能实现远程测试
5. 发布 zmoon-test 包：npm publish