前端项目开发流程思考

有项目开发经验的童鞋都应该知道，开启一个新的项目，不是上来就开始敲代码的，而是应该有一个约定俗成的流程。

假设你现在要做一个react项目，有哪些重要的环境是必须要考虑的呢？

本人认为应该考虑四个方面：工程架构、项目架构、业务开发、联调及投产上线~

工程架构

要配置一个能跑起来的工程，目前来说是离不开webpack。

webpack可以帮我们做很多事情，比如如何编译jsx文件、如何处理图片等静态文件、如何打包、如何做前端优化等等。

随着webAPP的发展，单页应用越来越多，服务端渲染也越来越受到前端开发者的重视，而webpack也可以帮助我们做到服务端渲染。

工程架构要达到的目的有三，分别是：

1. 解放生产力 我们希望 在开发过程中，把精力都聚焦在业务代码上，不需要考虑其他重复性的操作，比如：

• 源代码预处理
• 自动打包、自动更新页面显示
• 自动处理图片依赖，保证开发和正式环境的统一

2. 围绕解决方案搭建环境 react、vue、angular等框架的开发模式都是不一样的。react是jsx文件，vue是.vue文件，angular使用ts开发等。浏览器无法直接解析jsx、.vue等，我们需要一个编译的过程。 所以我们需要注意的点有：

• 不同的前端框架需要不同的运行架构
• 预期可能出现的问题并规避，比如使用sass来规避未来项目大了后CSS编写的问题等

3. 保证项目的质量 主要有两点作用，一是保证风格一致，有利于团队成员更好理解，二是有利于代码排错。 常用的方案有：

• code lint
• git commit 预处理

项目架构

工程搭建好了之后，我们就要搭建项目架构。

工程建构考虑的是让工程跑起来、更方便进行开发，而项目架构是考虑的项目的分层、更好地编程及更好的扩展性。

项目架构要考虑的点包括：

• 技术选型：假设我们做的是react项目，那我们就要配置路由和数据仓库。数据路由我们可以毫无疑问地使用react-router来做。数据仓库（store）部分我们可以考虑使用redux，也可以考虑使用Mobx这个后起之秀。Mobx相对redux来说更加简单，效率也更高。
• 整体代码风格

业务开发

项目架构搭建好，就可以真正动手开发业务了。

联调及投产上线

由于本文是针对前端项目，所以不会过多考虑后端的开发。

前端业务代码开发完毕，就可以跟后端童鞋进行联调，并交付测试组测试，最终投产上线~

最后

本文比较简单，是本人的一些思考。如果你有补充的，麻烦留言告知，不胜感激~