此项目为公司的公众号管理系统，承载了公司每个部门的业务，需求多，开发周期长，技术可圈可点之处较多，特此记录与大家分享!
1.使用技术：react＋react-router + react-redux + antd
2.请求方法封装
调用方法
3.破解反盗链
4.配置打包生产环境与测试环境
５.webpack + react-router 按需加载
首先在webpack中配置，主要需要配置 chunkFilename 这个属性，其它的顺便提一下
path：输出的文件存放的文件夹，此处address通过打包的命令生成，__driname为当前文件所在的目录的绝对路径
publicPath：处理静态资源引用地址，比如在CSS中引用了图片，打包后默认情况是url（文件名），这样必须确保资源文件和CSS处于同一目录，如果希望打包引用地址改为img目录下的资源，就需要用这个参数．
filename：编译生成的js文件路径，可在前面加上文件夹名，如果没有会自动创建．
chunkFilename：用webpack内置的require.ensure方法引入的模块打包后的文件名，如果该方法中没有引入任何模块，则不会生成任何chunk块文件．
Version：打包时JS文件生成的时间戳，禁止缓存
在需要分包加载的组件中使用require.ensure方法
语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])．
dependencies：依赖的模块数组．
callback：回调函数，该函数调用时会传一个require参数，可以进一步的require其他模块．
chunkName：模块名，用于构建时生成文件时命名使用．
require.ensure的模块只会被下载下来，不会被执行，只有在回调函数使用require(模块名)后，这个模块才会被执行.
require(‘./rankingList/orderDetails’).default中require方法的参数不能使用变量，只能使用字符串．
如果组件是使用ES5的module.exports导出的话，那么只需要require(‘./rankingList/orderDetails’)即可，而如果组件使用ES6的 export default 导出的话，那么需要加上default．
如果在路由页面使用了按需加载（require.ensure）加载路由级组件的方式，那么在其他地方（包括本页面）就不要再import了，否则不会打包生成chunk文件．
６.跨级组件之间的通信
首先定义公共事件对象event.js
在需要传递数据的组件multiMedia.js引入公共事件对象
组件multiMedia.js传递数据时
在需要接收数据的组件Editor.js中引入公共事件对象
在Editor.js的生命周期挂载完成后，调用监听事件
在Editor.js中定义事件newMedia接收数据
在Editor.js的生命周期将要卸载时，移除监听事件
7.Redux状态管理
在大型项目中，react中的组件嵌套及跨级是非常频繁的，而react的数据本身是单向数据流，这样组件之间传递数据非常麻烦，Redux最主要是用作应用状态的管理，用于实现多级组件之前的数据共享．
首先创建数据仓库store
在项目入口文件index.js中传入store
iv
当组件需要修改store里的数据时必须要派发action
action有两个特定参数，一个为type，为action的名称，一个为payload，即需要传递的数据
在需要修改数据的组件banDetail.js中引入action
在需要修改数据的组件banDetail.js中通过connect让addOpenActiveMenu这个action方法与当前组件做链接
在banDetail.js调用方法
定义reducer，处理store接收到的新数据
当reducer把处理过后的数据返回到store里后，同上面action的链接方法一样，让state与store做链接，就可以在组件里通过this.props.title获取store里的数据了，title即为store里的数据．
return时如果要返回异步数据，可以通过redux-thunk和redux-saga这两个中间件来实现，这样就可以以action中发起异步请求了．
8.瀑布流插件Macy的使用
未完待续．．．
9.表格插件Echarts使用
未完待续．．．
10.编辑器UEditor的使用
未完待续．．．
11.前端项目工程化与模块化的心得
(1).项目架构设计（比如登录页与数据页与通用页要设计成平级关系，而不是嵌套关系）
(2).目录结构定义（比如通用的config文件，不能藏的太深）
(3).制定项目开发规范(ESLint规范)
(4).模块化(小颗粒度的，如表格中的分页)、组件化(粗颗粒度的，如表格)(早期的require.js为例)
(5).前后端的接口规范(比如loading控制，错误拦截处理，code码代表的含义，系统级的错误、业务型的错误码，交互型的错误)
(6).性能优化、自动化布署（压缩、合并、打包）(webpack)