技术是为了解决问题存在的
以前那种写demo套模板,已经远远不能满足我们现在开发要求了,所以就有了前端工程化的概念。
既然说了技术是为了解决问题存在的,前端工程化也不例外。
问题:
- 想使用es6+新特性,但是浏览器不兼容
- 想要使用less,sass,PostCss增强css特性,但是运行环境不能直接支持
- 想要模块化的方式提高项目可维护性,但是运行环境不能直接支持
- 部署前需要手动压缩代码及资源文件
- 部署过程需要手动上传代码到服务器
- 多人协同开发,无法硬性统一大家代码风格,从仓库pull代码质量无法保证
- 部分功能开发时需要等待后端服务接口提前完成
主要解决的问题:
工程化的表现:一切以提高效率,降低成本,质量保证为目的的手段都属于工程化。
一切重复的工作都应该被工程化。
创建项目:
- 创建项目结构
- 创建特定类型文件
编码:
- 格式化代码
- 校验代码风格
- 编译/构建/打包
预览/测试:
- web Server/Mock
- Live Reloading/HMR
- Source Map
提交:
- Git Hooks
- Lint-staged
- 持续集成
部署:
- CI/CD
- 自动发布