首页 > 其他分享 >3-1 脚手架架构设计和技术方案设计全过程

3-1 脚手架架构设计和技术方案设计全过程

时间:2022-10-09 15:03:04浏览次数:55  
标签:方案设计 架构设计 git core commander 模块 脚手架

1. 一周导读

1.1 标题

  • 脚手架需求分析和架构设计,核心流程开发

1.2 将收获什么

  • 架构设计和技术方案设计全过程
  • 脚手架执行核心流程和 commander 框架
  • 如何让 Node 项目支持 ESModule

1.3 主要内容

  • 脚手架需求分析和架构设计
  • 脚手架模块拆分策略和 core 模块技术方案
  • 脚手架执行准备过程实现
  • 脚手架命令注册实现(基于 commander)

1.4 关键词

  • 脚手架 - 掌握脚手架需求分析和架构设计
  • 架构设计 - 图解架构设计图+绘图技巧
  • commander - 脚手架开发框架

1.5 学习方法

  • 学以致用: 将上一章中学到的知识进行实际应用(import-local/local dependencies/Promise chain 等)
  • 动手实践: 听完课程讲解后一定要动手画图,跟着老师把代码敲一遍,有很多技术细节需要在自己开发过程中去感悟和理解

1.6 注意事项

  • 本章前半部分偏架构设计,这部分内容很重要,是架构师的工作日常
  • 大厂架构师很多时候不是边写边想,而是把整体和局部都想清楚了再开始做
  • 注意培养自己的思考能力,将代码实现细节的内容抽象,通过系统论的思想构建复杂系统

2 谈谈大厂怎么做项目

3 前端研发过程中的痛点和需求分析

3.1 痛点分析

  • 创建项目/组件时,存在大量重复代码拷贝: 快速复用已有沉淀
  • 协同开发时,由于 git 操作不规范,导致分支混乱,操作耗时: 制定标准的 git 操作规范并集成到脚手架
  • 发布上线耗时,而且容易出现各种错误: 制定标准的上线流程和规范并集成到脚手架

3.2 需求分析

  • 通用的研发脚手架
  • 通用的项目/组件创建能力
    • 模板支持定制,定制后能够发布生效
    • 模板支持快速接入,极低的接入成本
  • 通用的项目/组件发布能力
    • 发布过程自动完成标准的 git 操作
    • 发布成功后自动删除开发分支并创建 tag
    • 发布后自动完成云构建、OSS 上传、CDN 上传、域名绑定
    • 发布过程支持测试/正式两种模式

4 大厂如何做git操作

5 脚手架架构设计 + 绘制架构图

5.1 imooc-cli 脚手架架构设计图

6 脚手架模块拆分策略 + core 模块技术方案

6.1 脚手架拆包策略

  • 核心流程: core
  • 命令: commands
    • 初始化
    • 发布
    • 清除缓存
  • 模型层: models
    • Command 命令
    • Project 项目
    • Component 组件
    • Npm 模块
    • Git 仓库
  • 支撑模块: utils
    • Git 操作
    • 云构建
    • 工具方法
    • API 请求
    • Git API

6.2 拆分原则

  • 根据模块的功能拆分
    • 核心模块:core
    • 命令模块:commands
    • 模型模块:models
    • 工具模块:utils

7 core 模块技术方案

7.1 命令执行流程

  • 准备阶段
  • 命令注册
  • 命令执行

涉及技术点

  • 核心库
    • import-local
    • commander
  • 工具库
    • npmlog
    • fs-extra
    • semver
    • colors
    • user-home
    • dotenv
    • root-check

标签:方案设计,架构设计,git,core,commander,模块,脚手架
From: https://www.cnblogs.com/pleaseAnswer/p/16772125.html

相关文章

  • 用vue脚手架创建项目的方法
    首先打开一个文件夹打开cmd输入vuecreate*****项目名称然后会看到如下,选择手动选择特性,因为需要自己配置接下来到这个界面,选择Babel和Css预处理器按回车进......
  • 新零售SaaS架构:中央库存系统架构设计
    近年来,越来越多的零售企业大力发展全渠道业务。在销售额增长上,通过线上的小程序、直播、平台渠道等方式,拓展流量变现渠道。在会员增长方面,通过多样的互动方式,全渠道触达消......
  • vue-cli脚手架的安装
    vue-cli提供一个官方命令行工具,可用于快速搭建大型单页应用。现如今,随着vue.js越来越火爆,更多的项目都用到vue进行开发,在实际的开发项目中,如何搭建开发脚手架呢,今天我分享......
  • Java系统架构设计 一线互联网公司架构设计 百度 阿里 腾讯
    原标题:【计算机·干货】阿里,百度,腾讯等一线互联网公司中,Java开发的招聘标准阿里巴巴篇扎实的计算机专业基础,包括算法和数据结构,操作系统,计算机网络,计算机体系结构,数据......
  • Vue脚手架创建
    1、安装脚手架的包npminstall-g@vue/cli,通过vue--version检查版本检查版本2、切换到创建项目的目录,然后使用命令创建项目vuecreatexxx3、项目配置 eslint:语法检......
  • 接口自动化框架脚手架-从Excel读取用例发起调用做断言
    作者:软件质量保障大家工作中统计测试用例、测试进度以及各种测试报表,或多或少离不开Excel,我们可以使用Excel公式实现自动化统计,当然也可以使用代码实现Excel数据的统计。今......
  • 如何全面提升架构设计质量
    低成本复杂度本质是对架构设计的一种约束与高性能高可用可扩展冲突。    优化引入缓存虚拟化容器化 性能调优高性能硬件开源方案......
  • 用commander.js构建自己的脚手架工具
    随着前端技术的发展,工程化逐渐成为了一种趋势。但在实际开发时,搭建项目是一件很繁琐的事情,尤其是在对一个框架的用法还不熟悉的时候。于是很多框架都自带一套脚手架工具,在初......
  • vue脚手架配置及安装
    npmconfigsetregistryhttp://registry.npm.taobao.org全局安装@vue/cli  npminstall-g@vue/cli切换到创建项目的目录,使用命令创建项目 vue create xxx......
  • API架构设计
    接口设计*.RestfulAPI[概述]REST是指表现层状态转移(RepresentationalStateTransfer).该概念首次出现在2000年RoyFielding的博士论文中,RoyFielding是HTTP规范的主......