期望你的收获
-
前端工程化中脚手架的整体设计和结构
-
能够自己独立为企业定制一套前端脚手架
背景
开发新项目遇到的问题
- 开发时间短
- 要求技术栈完整
- 辅助功能完善
- 针对不同的项目需求和团队情况，搭建项目基础环境不能一成不变
目前工程的痛点
- 重复性工作过多
- 不便团队统一开发风格，及跨团队合作
- 不便插件扩展等功能
期望脚手架解决的问题
-
快速搭建企业级项目框架
- 减少重复性工作
- 统一团队统一开发风格，便于跨团队开发及后期维护，降低新人上手成本
- 提供一键前端项目的创建，配置，本地开发，插件扩展等功能，让开发者更多时间专注于业务
-
规范项目开发目录
入门开发
基础架构
站在前端研发角度分析必要性
-
提升前端研发效能【提炼通用代码、通用流程、构建发布上线】
- 脚手架核心价值：自动化、标准化、数据化
-
和自动化构建工具(jenkins、travia)区别：自动化构建工具在服务端执行，无法覆盖本地操作且定制自动化的构建工具需要用到Java等后端语言，对前端不友好
从使用角度理解
脚手架的本质是一个操作系统的客户 端，通过命令行执行
从应用角度看CLI过程
- 首先是个npm项目，项目中有一个bin/vue.js的文件，且这个项目发布到了npm上
-
将npm项目安装到了lib/node_modules
-
在node的bin目录下配置软链接到lib/node_modules/@vue/cli/bin/vue.js
从广义和狭义角度分析
执行原理
快速实现你的脚手架
项目流程设计与开发
基础工作流程
流程设计与执行
预备知识
- commander： 强大的node命令行处理工具。能轻松的获取命令行的参数
- Inquire：命令行交互工具，让你能以“问答”的交互方式来完成一系列的命令行操作
- download-git-repo：git仓库下载工具，通常用来下载模板代码
- ora：终端loading美化工具
-
chalk：命令行输入/输出美化工具
目录结构设计
commander小试
核心代码讲解
常见脚手架工具
-
Yeoman：强健的工具，库，及工作流程的组合
-
Create-React-App：构建 ReactJs 框架
-
Vue CLI：构建 VueJs 框架
-
Plop：主要用于创建项目中特定文件类型的小工具，类似于 Yeoman 中的sub generator，一般不会独立使用
参考链接
npm https://www.npmjs.com/package/grant-uniapp-cli
github https://github.com/ForeverGuo/grant-uni-cli
标签：uniapp,项目,前端,request,ts,开发,命令行,脚手架,工具 From： https://www.cnblogs.com/strivegys/p/17175829.html