本文以React为核心，至于Vue和Angular暂时不考虑，所以不做过多评论，如果大家发现它们也有特别的优势，欢迎补充，互通有无。

1. 工具

1.1. 基础

1.1.1. yarn/npm

推荐yarn，速度更快，使用更简便，支持workspace等高级特性。 二者都要设置使用淘宝镜像（npm.taobao.org/），否则很慢。

1.1.2. npm-check-update(ncu)

github.com/tjunnone/np… 用于检查依赖库升级的，前端发展速度太快，需要经常跟进重要的第三方依赖版本，一是解决隐藏的BUG，二是防止长期不跟踪造成API不兼容，升级困难。

1.1.3. lerna/yarn workspace

lernajs.io/ yarnpkg.com/en/docs/wor… 备选。大型项目或类库项目组织架构，lerna目前有不少知名项目都在用。 与我们目前正在考察的微前端架构思路不太一致，可能会在小范围使用。

1.1.4. create-react-app

github.com/facebook/cr… create-react-app越来越成为业界主流了，毕竟是facebook官方的东西。

1.2. 开发

1.2.1. IDE – webStrom/vscode

VSCode，免费开源，插件丰富，定制能力强，发展势头良好。比较常用的插件有EditorConfig,Prettier,TODO Highlight,Trailing Spaces,ESlint,Jest,Node.js ExtensionPack,Debugger for Chrome,Git Extension Pack,等等，可参考这里： www.tuicool.com/articles/FV… WebStorm智能，开发效率高，插件也相对较多质量高 另外，VSCode用来做Java开发也是不错的，还有Flutter的支持。

1.2.2. 编译打包 -webpack

选择webpack是无疑的，社区活跃，更新快。Vue、angular、react脚手架都是采用的webpack

1.2.3. 代码检查 - eslint/editorconfig/prettier/husky/tslint

使用eslint并配合VSCode的插件做实时检查，在编码风格方面，使用editorconfig和prettier配合及其VSCode插件做标准化。 之前eslint的规则库主要使用airbnb公司的，google的也用过，后来觉得很多规则限制得过死，不得已要写大量的忽略规则，最终还是直接用create-react-app自带的或prettier的推荐规则更简便。 另外，使用husky（github.com/typicode/hu… commit之前的lint检查，避免不良代码提交到代码库。 使用ts的可以将使用tslint

1.3 调试

使用webpack提供的hot-reload开发服务和source-map，利用chrome浏览器自带的调试能力，同时结合相关开发工具插件： (github.com/facebook/re…) (github.com/reduxjs/red…) (github.com/mobxjs/mobx…) 如需与后台api服务联调，可以通过react-app-rewired配置webpack的devServer做反向代理实现。 webpack.js.org/configurati…

1.4 测试

TODO: 缺少集成测试、e2e测试等相关工具

1.4.1. 单元测试

前端测试框架很多，目前的主流应该是jest和jest-dom，主要是它是create-react-app自带的，也是facebook的，以及配套的react-testing-library。 其它常见的还有mocha,jasmine,ava等，以及chai/sinon等断言库，基本大同小异。

1.4.2. 组件测试

值得一提的是针对React组件开发的两个高层次的测试框架： airbnb.io/enzyme/ storybook.js.org/ 目前我们还没有用到，主要是单元测试写的本来就少，工程化还没跟上。

1.4.3. 数据工具

还有就是各类Mock库，用的也不多，jest自带的基本够用，再有就是ajax的mock库： github.com/ctimmerm/ax… 这个是结合axios库测试使用的。 还有数据相关测试辅助生成工具，例如： github.com/marak/Faker…

1.5. 部署

目前所有产品部署都已经docker化，前端跑在nginx容器里，通过gitlab的CI功能把webpack生成的build版本自动打包进nginx镜像。 早期使用过node做web服务器，用pm2做进程管理，现在都淘汰了。

2. 组件

2.1. 核心

2.1.1. 基础框架

react不解释

2.1.2. 状态管理

MobX (mobx.js.org/)。

2.1.3. 前端路由

目前react-router(reacttraining.com/react-route…)几乎是事实上的标准，不过它的版本4比3的改进方向不是很合理，因为前端路由本质上也属于状态管理的范畴，但它把onEnter和onLeave等事件改为使用组件生命周期的作法带来了耦合，这是一种倒退。 其实像https://github.com/nareshbhatia/mobx-state-router这样的路由的思路是对的，只是功能上不如react-router强大，最主要是缺少嵌套。 因此，暂时肯定还是要用react-router，但是将来如果有更好的出现可以考虑替换。

2.2. 界面

2.2.1. 基础套件

在我们有足够的人力开发自己的组件库之前，使用一些大型的第三方套件有助于产品的快速上线和界面维护。 目前，antd(ant.design/index-cn)是我们的主UI库，其自带的组件可以解决80%到90%多的原型实现问题，还可以通过修改less变量实现一定程度的界面风格定制。 在antd之前也验证过一些其它的套件，其中有一套也是阿里系的（具体名字和地址忘了，两年前antd的table不支持多级表头的时候考虑过它），还有http://amazeui.org/等，最终从组件的完整性和易用性方面看，还是antd胜出。 这里有一些参考资料： mp.weixin.qq.com/s/JFn64E1wR…

还可以采用fusion(fusion.design/)这一套ui框架主要和antd的区别是能够自定化组件，比如对每一个ui组件的文字、边框、尺寸、圆角、阴影等进行自定义，然后输入样式文件共开发使用，开发无需对组件样式做修改，视觉交互设计师完成就可以直接开发。

2.2.2. CSS in JS

除了webpack自身直接引入css/less文件之外，还有一些可以提高css编写效率的工具： typestyle和csstips typestyle.github.io/)，特别是对于flex布局控制非常有用。 推荐使用jss,但不建议直接使用jss。推荐使用优秀开源UI框架对jss的封装， @material-ui/styles和@material-ui/system，能够减少很多css的编写

2.2.3. 图表库

百度的ECharts及其React封装 (echarts.baidu.com/) (github.com/hustcc/echa…) 推荐采用antV，毕竟是大公司出品的可视化解决方案，推荐用react封装版本的bizCharts (bizcharts.net/products/bi…)还有一些参考资料： mp.weixin.qq.com/s/jdPgWwSEV…

2.2.4. 图标库

antd自带少量图标，大部分还是用的阿里图标库(www.iconfont.cn/)不过用起来还是稍微有点麻烦大多数情况下用react-icons(react-icons.netlify.com/)就够了，它里面包含了 Font Awesome(fontawesome.com/)和Material Design icons（google.github.io/material-de… 开源图标库。

2.3. 周边

2.3.1. 数据访问

目前我们使用的是fetch(github.github.io/fetch/)，准备换成axios(github.com/axios/axios)，后者的易用性方面较好，并且有更简单的mock方案，方便测试。

2.3.2. 国际化

国际化方案也有不少选择，antd用的是react-intl github.com/yahoo/react… 也是creatre-react-app默认推荐的，不过感觉不是特别灵活。 准备采用i18next相关的方案： (github.com/i18next/i18…) (github.com/dmtrKovalen…) 这个方案还可以同时用于node端，使得前后台统一使用同一套locale映射文件。

2.3.3. 常用工具

• 整个前端包括node代码里用的最多的小工具就是lodash了，取代了更早的underscore，不过现在要被ramda取代了。 ramda的知名度不如lodash，但起点高，相当于lodash/fp。在前端函数式编程中使得代码非常简洁，也可以在命令式下直接使用，只需要多写一个参数而已，完胜lodash。 (lodash.com/) (ramdajs.com/)

• 另外一个比较重要的常用工具库就是moment了，不过间接使用的多些（日期控件），直接用主要是做日期格式化和计算等。 (momentjs.com/)

• 还有一类工具是数据校验工具，目前直接用的也不多，主要用了antd封装的form校验，不过其内部库的校验规则还是值得了解一下： (github.com/yiminghe/as…) (github.com/skaterdav85…) 最后这个是mobx下另一套form验证机制使用的校验工具，可能用来替换antd的。

3. 其它

3.1. WebSocket

(socket.io/)、 (github.com/socketio/so…) 目前用的最多的还是socket.io

3.2. JWT

(jwt.io/)、 (github.com/auth0/jwt-d…) 前端的身份认证使用的是JWT方案，结合通讯库（fetch/axios）把认证信息通过HTTP协议头传输，并在客户端进行payload解析。

3.3. Service Worker

这个目前是通过create-react-app框架被动的在用，属于性能优化的东西，还没有仔细研究。

3.4. GraphQL

(facebook.github.io/relay/)、 (www.apollographql.com/) 针对这两家方案做过技术验证，感觉还不到投入生产的时候，不清楚现在怎么样了。

3.5. NodeJS

NodeJS在前端开发的角色主要是API中转和数据格式转换处理等，真正的后台服务还是在Java那边。 之前这边的NodeJS使用比较重，包括数据库访问、定时任务、消息推送、音视频接口等大量的功能，后来发现效果不是太好，主要原因是人力资源不足，代码质量不好保证。 后续如果还有少量node代码的话，准备使用阿里的egg框架： eggjs.org/

3.6. 微前端架构

就是前端的微服务化，这是目前重点研究的领域，还处于原型验证阶段，准备以single-spa为基础开始搞，这是目前能找到的最贴近我们实际的方案： (single-spa.js.org/)、 (alili.tech/tags/微前端/) 在这方面如果你们有好的资料或想法，咱们可以一块儿研究，这个是最有利于统一产品线的技术框架。