1. 前端工程化
全副武装:通过工程化提升【战斗力】
"刀耕火种"的年代
技术是为了解决问题而存在的
面临的问题
- 想要使用ES6+新特性,但是兼容有问题
- 想要使用Less / Sass / PostCSS 增强CSS的编程性,但是运行环境不能直接支持
- 想要使用模块化的方式提高项目的可维护性,但运行环境不能直接支持
- 部署上线前需要手动压缩代码及资源文件, 部署过程需要手动上传代码到服务器
- 多人协作开发,无法硬性统一大家的代码风格,从仓库中pull回来的代码质量无法保证
- 部分功能开发时需要等待后端服务接口提前完成
主要要解决的问题归纳如下
- 传统语文或语法的弊端
- 无法使用模块化/组件化
- 重复的机械式工作
- 代码风格统一、质量保证
- 依赖后端服务接口支持
- 整体依赖后端项目
2. 工程化表现
一切以提高效率、降低成本、质量保证为目的的手段都属于"工程化"
一切重复的工作都应该被自动化
- 创建项目
- 创建项目结构
- 创建特定类型文件
- 编码
- 格式化代码
- 校验代码风格
- 编译/构建/打包
- 预览/测试
- Web Server / Mock
- Live Reloading / HMR
- Source Map
- 提交
- Git Hooks
- Lint-staged
- 持续集成
- 部署
- CI / CD
- 自动发布
graph LR
A[创建项目]-->B[编码]
B-->C[预览/测试]
C-->D[提交]
D-->E[部署]
E-->B
3. 工程化不等于某个工具
一些成熟的工程化集成
create-reace-app
vue-cli
angular-cli
gatsby-cli
4. Powered by Node.js
厥功至伟的 Node.js
工程化内容概要
- 脚手架工具开发
- 自动化构建系统
- 模块化打包
- 项目代码规范化
- 自动化部署