项目工程化

前端工程化

工程化是一种思想，而不是某种技术。其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间等。

需要考虑什么

应该从模块化、组件化、规范化、自动化4个方面去思考。

模块化

很多人觉得模块化开发的工程意义是复用，其实应该是模块化开发的最大价值应该是分治。

分而治之是软件工程中的重要思想，是复杂系统开发和维护的基石，这点放在前端开发中同样适用。在解决了基本开发效率运行效率问题之后，前端团队开始思考维护效率，模块化是目前前端最流行的分治手段。

常用的模块化工具：webpack、parcel、requireJS、Sea.js、vite等等。

模块化发展史

模块化打包工具的出现

JS 模块化方案

AMD、CMD、UMD、CommonJS、ES6 Module 等，对应的框架和工具也一大堆。

CSS 模块化

基本都是在 Less、Sass、Stylus 等预处理器的 import、mixin 特性支持下实现的。

组件化

页面上所有的东西都可以看成组件，页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件

组件化≠模块化。模块化只是在文件层面上，对代码和资源的拆分；组件化是在设计层面上，对于UI的拆分 目前市场上的组件化的框架，主要的有Vue，React，Angular2。

在我们开发中常用到一些UI组件库，比如antd，或者我们自己动手封装的组件。组件化的自由、灵活，对我们代码的复用，开发效率的提升有重大作用。

前端规范化

关于规范化的工具主要有:eslint，stylelint。

在项目规划初期制定的好坏对于后期的开发有一定影响。包括的规范有:

• 目录结构的制定
• 编码规范 -- eslint,prettier
• 前后端接口规范
• 文档规范
• 组件管理
• Git分支管理
• Commit描述规范
• 定期codeReview
• 视觉图标规范

前端规范化重在提升代码的一致性，标准化，可读性，进而提升多人开发的工作效率，规范的流程对降低项目风险也有重要的作用。

前端开发规范化

自动化

也就是简单重复的工作交给机器来做，自动化也就是有很多自动化工具代替我们来完成，例如持续集成、自动化构建、自动化部署、自动化测试等等

自动化构建工具有webpack，umi，parcel，rollup，vite，对文件进行压缩，校验，资源合并等处理方式。

自动化测试借助于一些单元测试框架(Chai,Karma,Mocha)，UI测试框架(Jest,Enzyme,Selenium Webdriver)测试功能代码，其次还有性能测试-Benchmark，覆盖率测试-Istanbul，持续集成(travis-ci,codecov)帮助我们高效得完成测试工作

自动化部署使用pm2，项目是一个迭代开发的过程，使用pm2工具可用简化开发流程，大大提高开发效率，或者云效自动化部署