从模块化、组件化、规范化、自动化四个方面来思考

前端工程化的目的:

• 提升开发效率
• 提升产品质量
• 降低开发难度
• 降低企业成本

从五个阶段进行思考

1.开发
2.构建
3.部署
4.性能
5.规范化

image.png

image.png

image.png

一、模块化

模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。只有这样，才有多人协作的可能。

1、JS模块化

现在我们一般使用ES6的模块系统，使用import引入模块

模块的打包和加载问题

用Webpack+Babel将所有模块打包成一个文件同步加载，也可以打成多个chunk异步加载；

2、CSS模块化

问题:选择器的全局污染问题

解决:如vue的scoped

二、组件化

模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分。

三、规范化

• 目录结构的制定
• 编码规范
• 前后端接口规范
• 文档规范
• 组件管理
• Git分支管理
• Commit描述规范
• 定期CodeReview