前言

• 由于有些老旧项目是使用layui或者jquery那种html服务器渲染那种，所以有时候你需要使用你自己擅长的框架进行修改，否则就只能和它一样写layui那玩意。

思路

• 其实思路和微前端思路一模一样，但是微前端配起来还是有点麻烦，而且要以老旧项目为基座的话，为什么不提供个umd的引入呢，所以我们方式就是直接手动引入。

• 另外，我们这种方式是不需要子应用进行部署的，只要把js文件丢过去即可。所以跟微前端适用性还是有些区别。

流程

• 我们模拟的老旧项目是网上找的一个html模板，它的tab页切换是都是刷新形式，在路由中以根路径.html形式显示页面。
• 比如点击map的tab页，跳转到/map.html中。实际/map.html和/map不是一回事，/map.html的路径仍然是根路径。所以比如我们需要把react项目注入进map.html中，那么需要给react打umd包。
• webpack配置：

		config.output.publicPath = "/";
		config.output.library = "yehuozhili";
		config.output.libraryTarget = "umd";

• 如果使用cra，它名字是hash，也许固定下来会比较方便。自己配置下即可。
• 我这里打包的umd叫yehuozhili。配置的是根路径，js下会生成几个js文件，其中的runtime js是必须要第一个加载的。另外还有个注意点就是挂载点的问题，必须在末尾注入，或者你只是把渲染和卸载函数存起来也可以不用注意顺序。我下面的例子是挂载和卸载。
• 在react应用中，对开始的挂载做个替换：

export function render() {
	ReactDOM.render(
		<React.StrictMode>
			<App />
		</React.StrictMode>,
		document.getElementById("map1")
	);
}
export function unmount() {
	ReactDOM.unmountComponentAtNode(document.getElementById("map1")!);
}

• 这里我挂载点叫map1，当然你可以不存起来，直接进行渲染，这也是可以的。js运行完就可以直接渲染。
• 在主应用中，我们需要把打包的资源文件全部复制进根路径，除了html文件。
• react的html文件会自动下面注入一段引入umd的头，这段代码实际等于js中的runtime代码。
• 然后就直接在html页面中引入操作：

	<button
		onclick="window.yehuozhili.render()"
			>
				挂载
			</button>
			<button
				onclick="window.yehuozhili.unmount()"
			>
				卸载
			</button>
			<div class="map m_style1">
				<div id="map1"></div>
			</div>

• umd中打包的library名称就是挂载到window的名称，当资源加载完成后，既可使用其对应方法进行渲染或者卸载。
• 在一些稍微“先进”点的项目里，路由可能并不是直接刷新的，而是前端路由进行跳转，此时就可以把js加载到入口，然后进行监听路由变化进行对应的渲染和卸载。
• 由于js引入需要时间，执行也要时间，所以建议提前加载js，加载完成后给个信号，否则会报找不到你打包的库。