阅读 222

前端脚手架架构设计和框架搭建

01-脚手架开发

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

研发性能

开发脚手架的核心目标是:提升前端研发性能

image.png

image.png

脚手架核心价值

将研发过程

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

和自动化构建工具区别

问题:Jenkins等自动化构建工具已经很成熟,为什么还需要自研脚手架?

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

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

脚手架简介

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

vue create vue-test --force
复制代码

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

  • 主命令:vue
  • command:create
  • command的params:vue-test
  • option:用来辅助脚手架确定在特定场景下用户的选择

脚手架执行原理

脚手架执行原理如下:

  • 在终端输入vue create vue-test-app
  • 终端解析出vue命令
  • 终端在环境变量中找到Vue命令
  • 终端根据vue命令链接到实际文件vue.js
  • 终端利用node执行vue.js
  • vue.js 解析command/options
  • vue.js 解析command
  • 执行完毕,退出执行

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

以vue-cli为例

  • 开发npm项目,该项目包含一个bin/vue.js文件,并将这个项目发布到npm
  • 将npm项目安装到node的lib/node_modules
  • 在node的bin目录下配置vue软连接到lib/node_modules/@vue/cli/bin/vue.js
文章分类
前端
文章标签