脚手架的实现原理

发表于 | 分类于

前端脚手架

封面: %E5%89%8D%E7%AB%AF%E8%84%9A%E6%89%8B%E6%9E%B6%203120586a0b114ce68032adcdd43c8f7b/450136-20211216163813527-887451633.jpeg
简介: 前端统一cli工具搭建

https://www.bilibili.com/video/BV1KL4y1j7hj?spm_id_from=333.999.0.0

https://homework.imooc-lego.com/

https://github.com/omni-door/cli/blob/master/docs/README.zh-CN.md

大纲

part 1

  • 脚手架的实现原理
  • Lerra的常见用法
    • 多package项目管理痛点和解决方案，基于Lerna脚手架框架搭建；
    • yargs的使用方法
  • 架构设计技巧和架构图绘制方法

part 2

  • 架构设计和技术方案设计全过程；
  • 脚手架执行核心流程；
    • 脚手架模块拆分策略；
    • core模块技术方案；
  • commander框架；
    • 脚手架命令注册；
  • 如何让 Node项目支持ES Module ；

part 3

  • 如何设计高性能脚手架；
    • 图解高性能脚手架架构和设计方法；
    • JavaScript面向对象实战；
    • 封装通用package和Command类
  • node多进程开发；
    • 基于缓存+node多进程实现动态命令行加载和执行；
    • 业务逻辑和脚手架框架解耦；
    • node多进程，child_process源码分析；

part 4

  • 命令行交互方法
  • 服务端框架egg.js的应用和API开发；
  • egg.js集成云mongodb

part 5

  • ejs模板渲染；
    • 项目模板安装和功能开发；
  • glob文件筛选；
  • 项目标准安装和自定义安装；
  • 组件库初始化和安装；

脚手架的实现原理

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

    通过 which vue 可以查看命令的位置，实际位置：/usr/local/bin/vue ，是一个软连接，

    连接的位置：lrwxr-xr-x 1 luoyec wheel 39 3 1 2021 vue -> ../lib/node_modules/@vue/cli/bin/vue.js

    1
    2
    3
    4
    // package.json 文件中 bin 决定了命令名为 vue
    "bin": {
        "vue": "bin/vue.js"
      }

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

    1. 把依赖下载到指定的目录下，/usr/local/lib/node_modules/@vue/cli
    2. 读取 package.json 中 bin 的配置，设置软连接

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

    1. 执行vue命令时，其实是执行软连接；

    2. js文件无法直接执行，需要通过解释器(node)执行；

      1
      2
      3
      4
      #!/usr/bin/env node  环境变量中查询node
      console.log("hello world");

      // 等价于 node helloHorld.js
3. 通过 `ln -s  [path] [name]`  创建软连接；
  1. vue命令执行流程

图4.1 vue 命令执行流程

图4.1 vue 命令执行流程

脚手架开发调试

发布一个简单的npm包

  1. npm init -y

  2. 新建 bin/index.js 

    1
    2
    3
    4
    5
    6
    7
    8
    // package.json
    "bin": {
        "kit-test": "bin/index.js"
      }

    // index.js
    #!/usr/bin / env node
    console.log('hello fe architecture!');
  1. npm login、npm publish
  2. kit-test ⇒ hello fe architecture!

调试方法

  1. 调试单个包（注意文件夹命名）

    lyctea-test 包文件夹目录结构如下：

    1
    2
    3
    4
    ├── bin
    │   └── index.js
    ├── package-lock.json
    └── package.json
在`lyctea-test` 创建软连接 `npm link` ，此时会创建软链接会源文件所在目录


1
2
3
4
/usr/local/bin/lyctea-test -> ../lib/node_modules/lyctea-test/bin/index.js

$ll -a ../lib/node_modules/lyctea-test                                                   
../lib/node_modules/lyctea-test -> /Users/luoyec/Documents/Code/Github/fe-architecture/lyctea-test

  1. 调试多个包

    1. 新建 lyctea-test-lib 目录

    2. 创建 lib/index.js文件，导出sum方法

      1
      2
      3
      4
      5
      module.exports = {
          sum(a, b) {
              return (a + b);
          }
      }
3. 创建`lyctea-test-lib` 的软连接，`npm link`
4. 切换到`lyctea-test` 目录，创建软链接，`npm link lyctea-test-lib` ，此时 `lyctea-test` 可以方位到 `lib`库了

    
1
2
const lib = require("lyctea-test-lib")
console.log(lib.sum(1, 3));



5. 发布依赖包，移除软链接

Lerna

原生脚手架开发痛点

  • 重复操作
    • 多package本地link
    • 多package本地依赖安卓
    • 多package本地单元测试
    • 多package本地代码提交
    • 多package本地代码发布
  • 版本一致性
    • 发布时版本一致性，手工操作易出错
    • 发布后相互依赖版本升级
    • package越多，复杂性越高

Lerna简介

Lerna 是一个优秀的基于git+npm的多package项目的管理工具；

优势

  • 大幅减少重复操作
  • 提升操作的标准化

Lerna开发脚手架流程

Untitled