脚手架的定位与学习难点简介脚手架属于前端基础架构是前端研发自动化的关键工具为什么要学脚手架日常开发离不开脚手架Vue CLI、Create React App 创建项目webpack、Vite 等工具也都提供 CLI基础架构已成为前端的重要分支项目规模变大后需要专门的技术架构支撑大厂的研发中台本质就是一种支持研发的模式提升研发效率的主要抓手就是脚手架大厂通常有专门的基础架构团队维护脚手架并在其中植入权限校验保证安全和规范研发中台的 GUI 创建项目背后的能力仍由脚手架提供脚手架在研发体系中的作用前端、后端、组件库等项目都通过脚手架的项目模板创建前端发布由脚手架完成后端可用 Travis 等 CI/CD 方案前端发布环节多Git 提交、打包构建、代码规范检查、上传静态资源服务器、模板发布到后端、静态资源映射到 CDN全部手动操作不是架构方案必须用工具自动化为什么难Web 应用运行在浏览器脚手架是直接运行在操作系统上的客户端知识面更广Node.js、操作系统环境变量、管理员 / root 账户、HTTP、WebSocket 等逻辑复杂且高度抽象第一次看不懂很正常需要反复看、反复练掌握实现原理的好处能定位故障例如“命令不存在”、脚手架执行报错能自己开发脚手架少踩坑技术路线先用原生 Node.js 开发脚手架走通搭建 → 开发 → 发布全流程再用 Lerna 搭建多 Package 脚手架框架Lerna多 Packagemulti-package管理工具React、Babel 等项目都在用能大幅减少项目管理工作量学习方法架构三部曲掌握原理 → 独立思考 → 总结反思架构不是空中楼阁必须能落地落地的前提是掌握所用技术的实现原理深度剖析优秀开源项目由表及里、由浅入深视角切换从开发视角切到架构视角从全局思考问题优秀的程序员不仅能实现功能更要读懂别人的代码和思路前端研发脚手架核心功能简介一条init完成项目创建一条publish完成 Git 操作到构建发布全流程安装与命令npminstall-gmy-cli/core# 全局安装脚手架my-cliinit# 项目初始化my-clipublish# 项目发布my-cliinit-h# 查看命令的配置参数命令 / 参数说明init [options] [type]项目初始化publish [options]项目发布clean [options]清空缓存文件help [command]查看命令帮助-V, --version查看版本号--debug打开调试模式init 项目创建流程红色是模板选择模板可在服务端动态增加绿色是最终结果项目模板的价值比 Vue CLI 默认模板更精简删除无关的演示内容内置reset.css也可以加入网络请求、接口定义等业务通用代码publish 发布流程红色是云构建脚手架通过 WebSocket 与远程服务器交互绿色是最终产出的线上链接关键点代码托管支持 Gitee、GitHub仓库不存在时自动创建多人协作时都指向同一个开发分支自动合并远程分支和 master是一套标准的 GitFlow 流程首次发布约 83 秒再次发布约 45 秒手动操作通常要 10~20 分钟测试发布 vs 正式发布维度测试发布publish正式发布publish --prod分支保留开发分支dev/x.y.z删除开发分支tag不创建创建 release tag 并同步到远程访问测试环境链接如https://dev.example.com/...正式链接同步到 CDN再次发布链接不变刷新即可看到更新要求升级版本号大 / 中 / 小版本publish 常用参数参数说明--prod正式发布--refreshToken/--refreshOwner/--refreshServer强制更新 Git token / owner / 平台信息--force强制更新所有缓存信息--keepCache保留缓存--buildCmd cmd手动指定 build 命令--sshUser/--sshIp/--sshPath模板服务器的用户名 / IP / 上传路径开发脚手架的必要性简介站在架构师视角先回答“开发它能带来什么价值”核心目标是提升前端研发效能大厂研发架构集团 → BUBusiness Unit业务单元 / 事业部→ 业务线 → 前端团队不同团队开发 PC、H5、小程序等不同项目但有三类共通操作红色是三类共通操作下面是每类包含的具体工作这些操作人工做既耗时又容易出错脚手架把它们全部固化下来脚手架核心价值价值说明自动化重复代码拷贝、Git 操作、发布上线自动完成标准化项目创建、GitFlow、发布和回滚流程统一按提示操作即可不用记规范数据化研发过程系统化、可量化可统计创建项目、Git 操作、构建发布各自耗时数据化最重要所有努力都是为了持续改进研发流程量化后才能知道优化幅度和自动化构建工具Jenkins、Travis的区别维度Jenkins / Travis前端研发脚手架触发和执行位置Git hooks 触发在服务端执行在研发人员本地执行覆盖范围只能覆盖云构建部分还能覆盖本地创建项目、本地 Git 操作定制方式开发插件过程复杂使用 Java用 Node.js 开发前端更熟悉结论有了自动化构建工具仍然需要自研前端研发脚手架前端构建流程相对简单安装依赖、构建、上传资源自研成本低、节省时间多、后期可控也有大厂把云构建接入 Jenkins但构建过程如何在脚手架中展示仍需定制团队后期沉淀的大量组件也需要工具管理同样属于脚手架的范畴从使用角度理解什么是脚手架简介脚手架本质是操作系统的客户端通过命令行执行命令组成vuecreate vue-test-app--force-rhttps://registry.npm.taobao.org部分示例说明主命令vue脚手架本身commandcreate子命令向脚手架请求完成一个动作command 的 paramvue-test-app子命令的参数这里是项目名option--force选项相当于配置目录已有文件时强制覆盖不加则中断执行option-r简写形式等同于--registry指定安装依赖的源option 的 paramhttps://registry...选项的参数关键点--force可理解为--force true简写为-f一条横线-是简写两条横线--是全称vue create --help可以查看所有 option执行原理红色是理解原理的关键命令只是软链接最终由 node 执行一个 JS 文件查看命令在环境变量中的位置whichvue# /Users/xxx/.nvm/versions/node/v12.11.1/bin/vuenode 安装目录结构重点关注bin和libnode 安装目录 ├── bin/ │ └── vue - ../lib/node_modules/vue/cli/bin/vue.js # 软链接ls -l 显示 l 开头 └── lib/ └── node_modules/ # 全局依赖npm install -g 安装到这里 └── vue/cli/ ├── bin/vue.js # 实际执行的入口文件 └── package.json从应用角度看如何开发一个脚手架红色是最关键的一步绿色是最终效果待解决的三个问题为什么全局安装vue/cli后会自动在 bin 目录添加vue软链接全局安装vue/cli时到底发生了什么vue指向的是 JS 文件为什么不用输入node vue.js就能直接执行面试/考试记忆点脚手架本质是操作系统的客户端通过命令行执行脚手架命令由主命令、command、command 的 param、option、option 的 param 组成执行原理终端在环境变量中找到命令 → 命令是指向全局node_modules中 JS 文件的软链接 → node 执行该文件 → 解析参数并执行对应 command全局安装的包在 node 安装目录的lib/node_modules可执行命令在bin目录开发前端研发脚手架的核心目标是提升前端研发效能脚手架三大核心价值自动化、标准化、数据化大厂前端共通操作三类创建项目 通用代码、Git 操作、构建 发布上线Jenkins、Travis 在服务端执行覆盖不到本地创建项目和本地 Git 操作且定制要用 Java所以仍需自研脚手架研发中台的 GUI 背后能力仍由脚手架提供架构三部曲掌握原理 → 独立思考 → 总结反思