前端项目开发流程思考

这里有一份简洁的前端知识体系等待你查收，看看吧，会有惊喜哦~若是以为不错，恳求star哈~

引言

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

假设你如今要作一个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来讲更加简单，效率也更高。
• 总体代码风格

业务开发

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

联调及投产上线

因为本文是针对前端项目，因此不会过多考虑后端的开发。

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

最后

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