以react为核心的企业级前端架构

导语：

我们正处在一个技术大爆发时代，IT技术作为与人们生活息息相关的领域，得到了飞速发展。前端技术，又是所有IT技术中，更新最快的领域之一，考虑到前端社区“激进 ”的创新风气，似乎也可以把“之一 ”去掉。

1八一八前端的历史

在笔者看来，从技术上进行划分前端大概经历了这几个阶段：

图文信息展示阶段：这是前端技术的公元前，主要是为了展示信息给受众，网站几乎没有什么交互功能
DHTML时代：DHTML让网页具有了更丰富的展示手段，页面能够对人们行为产生更多的反馈，具备了更好的交互性，大名鼎鼎的web2.0就是处于这个阶段
前端工程化时代：随着页面功能的丰富，前端部分的代码逐渐变得庞大，代码维护和复用，成了前端技术发展的主旋律。在这个时代，前端技术得到了空前的发展：语言特性得到加强，新的标准紧锣密鼓的出炉(HTML5，CSS3，ES2015 and ES7 is coming~)；各种类库层出不穷，各种思想百花齐放；更多的问题被尝试用前端技术解决，前端技术被用于完成更多领域的任务，这是前端的黄金时代

前端的黄金时代(图片来源于网络)

前端技术的每一次变革，引领着人类信息生活的变革。门户网站，让我们能够随时获取最新的咨询；Youtube、twitter、微博，让普通人能够发出自己的声音，被世界聆听；能够运行在多平台上的web语言，快速的开发效率，极大的减小了我们表达自己思想的代价，创业、创新不再是大集团，大组织的专属活动。

2我们需要什么样的前端架构

企业级前端技术，说起来挺唬人的...我们平时在公司做的前端工作，又不是个人的，那不就是企业级的么。

是的，不过根据具体运用技术的不同，前端架构会具有不同的features，笔者所指的企业级前端架构，是需要具有很多features，能满足较高要求网站开发的架构。

笔者根据自己经验，一般对于高可维护性，高访问量的网站，应该具有如下features(在文末会配合选型框架对部分features实现进行说明)：

基本features
低版本IE支持(IE8+) - 前端开发人员的痛点
前端性能优化支持 - 压缩、合并、图片优化

进阶features
代码风格检查 - 从源头控制代码风格
前后端完全分离 - 通过接口进行交互
使用语法糖 - 使用新版本的语法，精简代码，提高代码健壮性和可维护性，与未来保持一致
开发时的文件变动侦测 - 自动加载改动部分，体现在浏览器中
组件化 - 提高可复用性和复用度
代码模块化 - 提高代码内聚性和可维护性，充分利用浏览器缓存机制，提高前端性能
模块懒加载 - 防止一次性加载过多代码，导致长时间用户等待
移动端和pc端代码可以不同 - 针对移动端和pc端分别打包
带版本或者hash的文件名 - 方便部署的时候，先上传代码，然后上传html，就可以更新网站
前端测试 - 前端单元测试和黑盒自动化测试
接口mock - 进一步解耦前后端开发，开发时按照接口，使用mocker，防止服务器重启，代码更新带来的干扰

3具体框架选型

由于项目时间压力和人力的关系，我们暂时还不能去创造轮子，不过无妨，社区已经有很多优秀的轮子供我们选用。框架选型设计到很多方面，可以独立写一篇或者多篇文章，笔者这里只简单对比人气最高的框架，突出一下框架的特点。

主体框架选择
主体框架决定了我们前端代码的形态，框架能帮我们做的事情越多，我们自己需要做的事情就越少。

AngularJS等MVX(X)框架，能够提供模型到显示的绑定，这样我们就从操作dom中解放出来了，自带的模块管理，也可以帮助我们实现模块化。

但是笔者认为，从组件的封装性上来讲，React做得更好，再者AngularJS饱受诟病的性能问题，正好是React的强项，我们有理由选择React作为主体框架。

web打包工具
web打包工具可以将我们的开发，发布流程自动化，让我们的开发和发布更方便。

既然用了React，webpack作为React的亲密小伙伴，自然为我们选用。Gulp也是很优秀的打包工具，笔者认为，gulp的语法更清晰，更浅显易懂，gulp的功能也更加强大，无奈React和webpack太亲密了，webpack也有很多很好的特性，比如在代码中直接引入样式，图片等，可以让模块的内聚性更高，另外，gulp也可以和webpack双剑合璧，实现更NB的功能。

4以react为核心的企业级前端架构技术栈

react - 主体框架，可以通过引入额外文件，实现对IE8的支持

react-router - 配合react，实现单页面应用程序

bootstrap - 前端样式框架，3.x可以引入额外文件，实现对IE8的支持

webpack - web打包工具

eslint - 检查代码风格和潜在的风险，尽量在提交之前更正他们

babel - 将ES6语法编译成ES5语法，支持语法糖的使用

最终成型的代码，可以在笔者的github上下载到，地址请继续往下看，在文章结尾。

5部分features实现说明

低版本IE支持(IE8+)
React需要es5-shim、es5-sham，bootstrap需要respond.js html5shiv才可以在IE8下正常运行，这4个文件不经常变动，连同console-polyfill打成1个文件节省http请求数。具体做法是ie相关的js单独作为一个chunk，因为mobile端没有ie，不需要这些文件，然后browser端的代码，将ie相关的js写到添加注释中。

代码风格检查
将eslint-loader用于js文件的即可，注意，eslint-loader应该放在babel-loader下面，让其先执行，然后再执行babel-loader。

使用语法糖
使用babel-loader即可，然后尽情使用es6新语法吧。

开发时的文件变动侦测
有两种方式，一种是webpack-dev-server，放在webpack config文件中，另一种是webpack-dev-middleware，提供node api调用，这里选用webpack-dev-middleware，可以更加灵活。

代码模块化
可以使用chunk来代表模块，chunk可以通过配置entry产生，也可以通过require.ensure和require AMD产生，还可以插件产生，可以根据具体的情形，选用不同的方式。例如，如果是基本类库，可以选择作为entry；如果是业务模块，而且需要动态加载的，可以使用require.ensure。

移动端和pc端代码可以不同
使用不同entry，将不同平台需要加载的脚本打包成不同的文件，然后，通过HtmlWebpackPlugin插件，将不同entry放入不同模板中，在不同平台下，访问不同模板，从而实现不同平台访问不同代码。

结语

以上只是部分features实现的说明，也可能有不清晰的地方，具体实现请移步：https://github.com/Pliman/enterprise-react，如有需要，欢迎留言讨论。

如果您想投稿给我们，或者想转发和采用我们的稿件，请回复“合作”，小编会在2小时内回复您的投稿和合作需求。

本文作者：孙彬，程序猿一只。对有技术含量的事情，都感兴趣。足球爱好者，喜欢球场上奔跑的感觉，现任职于点融技术部成都分部。