创业成长系列.前端项目模块化解决方案

一个完整的前端项目如果想要不断的持续开发下去，一定在最初的时候就要有一个完整的解决方案。在这里我教给大家其中的一种解决方案。以后会放出升级版，这一版是最原始的版本。

前后端分离的开始

首先简单的把前后端分离出来吧。

1.所有资源全都静态化，数据都从后端的接口获取。
2.使用nginx将前端和后端链接在一起，同时将资源和页面分开。

以上部分就显示了分离以及分离之后组成的页面部分。其中前端资源包括css、js、图片等。这部分也可以做cdn加速等操作。

前端模块化

前端模块化也是前端组件化。它是把所有资源看做是一块一块的结果集。你可以认为一堆接口+几个页面+几个针对的js文件就组合成了一个模块。这个模块对应业务或者逻辑上的一个模块。如果再看微服务的同学可能会更理解一些。

1.业务的分离更适合后端的分离。
2.统一的接口代表了统一的变化
3.不同的模块自由组合。可以是模块的组合也可以是js、css的组合
4.前端内部再次分离，更细粒度的控制js、css等资源，最终在构建的时候统一处理，减少重复开发。

一些实现方式

以下就是一些涉及到的技术选择了。

1.css部分。通过less的分离导入功能做到统一部分合并，不同的地方使用不同的样式。
2.js部分。使用requrejs导入不同的js文件在做异步加载，更利于页面的加载速度，更好的模块化方式。
3.页面。使用gulp来出来这些模块化的页面。

以上就是一些简单的模块化选择，当然这只是一个基础，更复杂的是后面的部分。

其他实现

1.基础模块。在所有模块加载之前，有一个基础模块需要先处理，它的优先级非常高。它通常会需要做权限的判断，预设内容的判断，登录状态的管理等等。类似于一个筛选器，将一些不能够看的功能隐藏或者跳转到其他页面等。
2.ajax模块。这个模块隐藏在所有接口文件后面。因为要做一些特殊处理。比如token验证、返回格式验证、报错信息验证提示等。
3.多语言的一部分。对的，你没有看错。多语言涉及到的一部分也在这里。包括不同语言的css文件加载、不同语言的提示文件加载等等。。
4.gulp处理。整个项目的开发都是构建在gulp的基础上的。包括css处理、es6处理、图片处理、httpserver的启动和重启等。除了这些基础的东西外还有多语言的一部分。版本控制、不同环境构建命令等。

这些是使用到的一些插件。

这个是本地开发使用到的命令，下面是动态输出的配置。

对的，还有Nginx。线上会有运维管理。开发环境还是需要自己手动配置的。不同的环境，不同的服务器都需要使用Nginx来连接。至于host的配置就不贴图了，那个没有啥难度。

开发流程

1.首先在git分支上开发。这一步还是原始流程。
2.使用Nginx连接开发服务器测试开发结果，如果有问题甚至可以连接后端同事的电脑做测试。
3.由运维部署到测试环境，并进行统一的测试。这个阶段有测试同学介入。
4.线上测试。这一步基本上是做正式的测试，防止问题发生在线上环境。
5.测试完成，正式上线。

注：可以是使用Jenkins来做各个环境的部署。上面的动态配置可以根据不同的环境生成不同代码。运维同学完全可以一键搞定git管理、代码构建发布。下面是一张项目结构图。

以上就是一个完整的前端解决方案。有问题欢迎问我。