1、需求背景：
微前端架构中，子应用开发我们采用了基座下发的方式，子应用开发时，拉取sim环境基座，保证子应用代码环境的统一性，方便调试与问题发现。
问题：
1、在实际代码实现过程中发现，子应用本地开发的热更新功能变得不可用，经过debug发现原因是基座使用的是production版本的react，而react热更新相关的代码只在开发环境中，故导致了没有热更新
2、由于是react生产版本，其常见的开发环境中的警告未能出现，比如for循环式key重复等等。
2、解决方案：
编写一个webpack插件，根据环境拉取不同的react版本,其中使用的是html-webpack-plugin提供的钩子，在生成inde.html前修改其内容。
注意：
1、只有sim环境才有此需求，因为我们子应用开发拉取的是sim环境的基座。
2、只有sim环境的时候，且是微应用本地开发模式下才需要替换react位开发版本
3、production版本和development版本的react相关库，需要同时上传cdn，并且以production和development文件名区分，以方便替换
3、代码实现
cdn常量文件
module.exports = {
jsList: [
'https://cdn.xxxx.react@18.2.0.production.min.js',
// 最终会被替换成：https://cdn.xxxx.react@18.2.0.development.min.js
'https://cdn.xxxx.react-dom@18.2.0.production.min.js',
// 最终会被替换成：https://cdn.xxxx.reac-dom@18.2.0.development.min.js
'...'
]
}
请确保生产版本和开发版本的cdn资源都存在，并且URL只有production和development的区别
插件使用：webpack.config.js
module.exports = {
...,
plugins: [
IS_SIM_BUILD_ENV && new ReplaceReactHtmlPlugin({ cdn: { jsList } })
]
}
插件代码：
/**
* 本地开发替换react为开发版本
* sim环境下，判断host及pathname判断替换react为开发版本，确保子应用开发模式下拉取sim基座时使用dev版本
* @author ethanqiang
* @create 2021-12-07
*/
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development'
class MyPlugin {
apply(compiler) {
compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync('MyPlugin', (data, cb) => {
let cndJSList = data.plugin.options?.cdn?.jsList
if (!Array.isArray(cndJSList)) return cb(null, data)
let jsList = [...cndJSList]
if (isDev) {
jsList = jsList.map(item => {
if (/\/react/.test(item)) { // 本地开发只需要将react的版本切换为开发版本即可
return item.replace('production', 'development')
}
return item
})
data.assets.js = jsList.concat(data.assets.js)
} else {
// sim环境需要生成generate文件，根据host拉取不同版本的react库
const file = this.renderFile(JSON.stringify(jsList.concat(data.assets.js)))
const fileName = `micro-base-static/js/generate.${Date.now()}.js`
compilation.assets[fileName] = {
source: () => file,
size: () => file.length,
map: () => ({
sources: []
})
}
data.assets.js = [`${process.env.OE_BRANCH_NAME ? `/${process.env.OE_BRANCH_NAME}/` : '/'}${fileName}`]
}
data.plugin.options.cdn.jsList = [] // 删除cdn资源，因为资源已都从generate.js中动态插入
cb(null, data)
})
})
}
renderFile(jsArray) {
return `(function (jsArray) {
var location = window.location
jsArray.forEach(function(js){
if (location.host.indexOf('local') > -1 && location.pathname.indexOf('/proxy') > -1 && /\\/react.*\\.production\\.min/.test(js)) {
js = js.replace('production','development')
}
var script = document.createElement('script')
script.src = js
script.async = false
script.type = 'text/javascript'
document.head.appendChild(script)
})
})(${jsArray})`
}
}
module.exports = MyPlugin
注意点：由于动态创建的script标签默认是异步加载的，即其async属性为true，会导致js执行顺序非指定顺序，故需要加上这句：
script.async = false
至此，完成。
