2021年React项目前端开发总结

此项目为公司的公众号管理系统，承载了公司每个部门的业务，需求多，开发周期长，技术可圈可点之处较多，特此记录与大家分享!

1. 使用技术：react＋react-router + react-redux + antd

2. 请求方法封装

调用方法

3. 破解反盗链

4. 配置打包生产环境与测试环境

5. 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文件．

6. 跨级组件之间的通信

首先定义公共事件对象event.js