前端打包混編壓縮js程式碼，如何不重新打包，修改js檔案內部配置引數？

trsoliu訊飛至悅發表於2019-06-04
前端JS

利用worker多執行緒 實現基於vue打包後外接配置化操作 實際就是vue build打包檔案都混編了 但是worker多執行緒 實現外部配置。

前端專案在build後，專案的程式碼通常進行混編、壓縮等處理，我們的js程式碼最終會成為無序的js模組檔案。若修改專案中業務的配置引數，通常可以通過介面服務來傳達，但是有時候也需要外部的配置檔案來傳達，如專案已經到生產環境，在不重新打包發版本的基礎上，修改其程式碼內部引數。

1.多執行緒方法

/**
 * @description worker.js
 * @author trsoliu
 * @date 2019-01-27
 * @params  url 需要執行的執行緒
 */
const worker = {
	setWorker: (url) => {
		if(typeof(Worker) !== "undefined") {
			return new Worker(url);
		}
	}
}
export default worker;
複製程式碼

2.配置外部配置檔案

/**
 * @description config.js 特別說明一下，config.js需要放在根目錄static資料夾下，如下圖
 * @author trsoliu
 * @date 2019-01-27
 */
postMessage({
    params1:1111,
    params2:2222
})

複製程式碼

前端打包混編壓縮js程式碼，如何不重新打包，修改js檔案內部配置引數？

3.內部js利用worker呼叫呼叫配置檔案

//import worker from "./../../../../assets/js/libs/worker.js" //先引入呼叫方法
worker.setWorker("./static/js/config/config.js").onmessage = (event) => {
	let paramsData = event.data;
	console.log(paramsData);
	//console.log結果為：{params1:1111, params2:2222}
};
複製程式碼

4.部署後，生產環境config.js檔案位置

控制檯=>Sources=>Page=>config.js，如下圖
複製程式碼

前端打包混編壓縮js程式碼，如何不重新打包，修改js檔案內部配置引數？

5.使用

按照上述使用後打包，在打包檔案中會有一個沒有被import合併壓縮的config.js檔案，此檔案為後續版本配置引數修改的檔案。單獨修改更新伺服器上此檔案，就可以在無需重新打包的情況下修改全域性配置引數。

有建議或問題可以加群qq交流535798405

相關文章