前端工程化

全副武装：通过工程化提高“战斗力”

面临问题：技术是为了解决问题而存在

• ES6+新特性，但是有兼容性问题
• Less/Sass/PostCSS增强CSS的编程性，但是运行环境不能直接支持
• 想要使用模块化的方式提高项目的可维护性，但是运行环境不能直接支持
• 部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器
• 多人协作开发，无法硬性统一大家的代码风格，从仓库中pull回来的代码质量无法保证
• 部分功能开发时需要等待后端服务接口提前完成

主要解决问题

• 传统语言或语法的弊端
• 无法使用模块化/组件化
• 重复的机械式工作
• 代码风格统一、质量保证
• 依赖后端服务接口支持
• 整体依赖后端项目

前端工程化表现

一切以提高效率、减低成本、质量保证为目的的手段都属于“工程 化”

一切重复的工作都应该被自动化

• 创建项目:创建项目结构、创建特定类型文件
• 编码：格式化代码、校验代码风格、编译/构建/打包
• 预览/测试：web server/mock、live reloading/HMR、Source Map
• 提交:git hooks、lint-staged、持续集成
• 部署:CI/CD、自动发布

一些成熟的工程化集成

Create-react-app \ vue-cli \ angular-cli \ gatsby-cli

主要内容

• 脚手架工具开发
• 自动化构建系统
• 模块化打包
• 项目代码规范化
• 自动化部署