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

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

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

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

    • #!/usr/bin/env node

2. 实现原理 -- 进阶

  1. 为什么说脚手架本质是操作系统的客户端? 它和我们在PC上安装的应用/软件有什么区别?
  • node 本身是一个执行文件
  • node test.js 将 test.js（参数） 执行

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

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

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

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 文件
  1. 配置 package.json，添加 bin 属性编写脚手架代码
  1. 将脚手架发布到 npm

    npm login
    npm publish

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
posted on 2022-09-07 10:16  pleaseAnswer  阅读(127)  评论(0)    收藏  举报

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3