引言
有项目开发经验的童鞋都应该知道，开启一个新的项目，不是上来就开始敲代码的，而是应该有一个约定俗成的流程。
假设你现在要做一个react项目，有哪些重要的环境是必须要考虑的呢？
本人认为应该考虑四个方面：工程架构、项目架构、业务开发、联调及投产上线~
工程架构
要配置一个能跑起来的工程，目前来说是离不开webpack。
webpack可以帮我们做很多事情，比如如何编译jsx文件、如何处理图片等静态文件、如何打包、如何做前端优化等等。
随着webAPP的发展，单页应用越来越多，服务端渲染也越来越受到前端开发者的重视，而webpack也可以帮助我们做到服务端渲染。
工程架构要达到的目的有三，分别是：
- 解放生产力 我们希望 在开发过程中，把精力都聚焦在业务代码上，不需要考虑其他重复性的操作，比如：
- 源代码预处理
- 自动打包、自动更新页面显示
- 自动处理图片依赖，保证开发和正式环境的统一
- 围绕解决方案搭建环境 react、vue、angular等框架的开发模式都是不一样的。react是jsx文件，vue是.vue文件，angular使用ts开发等。浏览器无法直接解析jsx、.vue等，我们需要一个编译的过程。 所以我们需要注意的点有：
- 不同的前端框架需要不同的运行架构
- 预期可能出现的问题并规避，比如使用sass来规避未来项目大了后CSS编写的问题等
- 保证项目的质量 主要有两点作用，一是保证风格一致，有利于团队成员更好理解，二是有利于代码排错。 常用的方案有：
- code lint
- git commit 预处理
项目架构
工程搭建好了之后，我们就要搭建项目架构。
工程建构考虑的是让工程跑起来、更方便进行开发，而项目架构是考虑的项目的分层、更好地编程及更好的扩展性。
项目架构要考虑的点包括：
- 技术选型：假设我们做的是react项目，那我们就要配置路由和数据仓库。数据路由我们可以毫无疑问地使用react-router来做。数据仓库（store）部分我们可以考虑使用redux，也可以考虑使用Mobx这个后起之秀。Mobx相对redux来说更加简单，效率也更高。
- 整体代码风格
业务开发
项目架构搭建好，就可以真正动手开发业务了。
联调及投产上线
由于本文是针对前端项目，所以不会过多考虑后端的开发。
前端业务代码开发完毕，就可以跟后端童鞋进行联调，并交付测试组测试，最终投产上线~
最后
本文比较简单，是本人的一些思考。如果你有补充的，麻烦留言告知，不胜感激~