技術標籤：javascript

前言

• 由於有些老舊專案是使用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，載入完成後給個訊號，否則會報找不到你打包的庫。