2-1-1-工程化概述
工程化的定义和主要解决的问题
再前端的开发过程中常常会遇到下面的问题,工程化可以很好的解决。
- 想要使用ES6新特性,但是兼容性有问题
- 想要使用less / Sass / PostCSS增强CSS的编程性,但是运行环境不能直接支持
- 想要使用模块化的方式提高项目的可维护性,但运行环境不能支持
- 部署上线前需要手动压缩代码及资源文件,部署过程需要手动上传代码到服务器
- 多人协同开发,无法硬性统一大家的代码风格,从仓库中pull出来的代码质量无法保证
- 部分功能开发时需要等待后端服务接口提前完成
一个项目过程中工程化的表现
创建 ——> 编码 ——> 预览/测试 ——> 提交——> 部署
- 创建项目的时候可以直接使用脚手架工具完成项目的搭建
- 编码的过程中可以完成代码的格式化确保代码风格统一,借助编译工具,在开发过程中使用新特性,提高开发效率
- 预览/测试阶段,Web Server / Mock, Live Reloading / HRM, Source Map
- 提交阶段,Git Hooks检查代码、Lint-staged、持续集成
- 自动部署服务器
工程化 != 某个工具
工程化的核心是对项目整体的规划或者架构,工具是手段。
规划一个项目整体的工作流架构
- 规划文件的组织结构
- 源代码的开发范式(使用什么样的语法?什么样的规范?什么样的标准?来编写代码)
- 通过什么样的方式去做前后端的分离(基于Ajax还是基于中间层)
工程化与Node.js
内容概要
- 脚手架工具开发
- 自动化构建系统
- 模块化打包
- 项目代码规范化
- 自动化部署