工程化的核心
对项目的整体规划和架构
常规前端项目的整体环节大约有5步：
创建项目-编码-预览/测试-提交-部署
详细解析
-
技术选型 选择适合团队，适合项目开发
-
统一规范
统一规范的好处：
- 规范的代码可以促进团队合作
- 规范的代码可以降低维护成本
- 规范的代码有助于code review js代码规范：airbnb
css代码规范：styleguide
如何检查代码规范： 使用eslint检查代码
git规范：分支管理规范、git commit规范
一般项目分主分支(master)和开发分支(dev)
代码注释
项目目录的规范：一个项目包含public（公共资源，不会被webpack处理）、src(源码)、配置项
- 部署 自动部署（持续部署）：
一般有两种触发方式：
- 轮询：每隔一段时间自动执行打包、部署操作（不可取）
- 监听webhook事件
- 性能监控 监控：又分为性能监控和错误监控，作用四预警和追踪定位问题 一般利用window.performance进行数据采集
performance接口可以获取当前页面中与性能相关的信息
前端工程化解决的问题主要有6个部分
- 传统语言与语法的弊端(ES6+语法、TypeScript、Sass)
- 无法使用模块化/组件化(ES Modules、Components)
- 重复的机械式工作(Build、Pbulish)
- 代码风格统一、质量保证(git、ESLint)
- 依赖后端服务接口支持(Mock)
- 整体依赖后端项目(DevServer)
