前端分級配置

時間 2019-11-06

標籤前端分級配置简体版

原文原文鏈接

隨着前端工程的逐漸龐大和完善，不少原前後端的功能開始又前端接管，加上spa的流行，前端配置的重要性日益重要javascript

1. 由後端模板渲染的前端項目

流程以下html

配置信息能夠由後端項目維護，在渲染前傳到前端，完成頁面和邏輯。該方式下配置來源簡單，而且能夠知足全部的需求

2.先後端分離

分離以後，路由、頁面加載邏輯都有了很大的變化，再也不是由一次加載就能完美解決的，以下圖，有多種配置及時機須要咱們考慮前端

a. 第一個解決方案

ssr的同構方案，框架比較多，使用服務端渲染，好多天然是不少的，可是侷限性也很大，服務端渲染是無狀態的，因此對於業務複雜的狀況，對於編碼會有很大挑戰java

該方案能夠看對於框架的描述webpack

b. 第二個方案，分級配置

如上圖描述，配置分紅了多個環節而且場景也各不相同，分級配置的特色就是利用前端的各個環節，將配置分解合併nginx

階段	配置項舉例	用處	缺點
構建期⭐️	env:環境變量，logger:日誌參數	區分環境，如開發、測試、生產	修改配置須要從新構建
發佈期⭐️⭐️	monitor:監控配置， enableHistry:使用hash仍是history描述	能夠用來加載全部頁面初始化前的配置	修改配置須要重啓
運行期⭐️⭐️⭐️	banner:輪播，notice:通知	能夠動態加載一些業務配置	須要阻塞必要的業務代碼

你們會發現，也行有些配置是會重的，構建期要用，運行期也須要用，這時候就須要配置覆蓋，上圖星越多表示越靈活web

依次，咱們就能夠肯定配置覆蓋優先級json

下面咱們細說下三級配置，如何實現後端

構建期：

以webpack爲例app

構建自己會傳NODE_ENV相似參數，用以標記發佈環境

如:

測試： NODE_ENV=sandbox

生產： NODE_ENV=prod

基於此，咱們能夠在構建時動態讀取相關配置項，經過DefinePlugin編譯到代碼中

new webpack.DefinePlugin({
server_setting: JSON.stringify({
  logger: {enable: false}
})
})
複製代碼

發佈期：

因爲發佈期已經沒法編碼了，因此咱們能夠藉助配置平臺，咱們這邊借用了apollo的配置中心，在構建時讀取到配置數據，轉換成代碼加入源文件

實現以下：

首先，項目編碼時，在須要加入配置代碼的位置，放置一個佔位符，通常都是在全部代碼以前。

<head>
  <!--serverConfigSlot-->
 <!--如下加入你的框架、業務代碼-->
</head>
複製代碼

第二步，構建時讀取配置，替換該佔位符，修改項目啓動代碼以下

echo "var configFormServer = " > /nginx/static/js/config.js
curl http://apollo-configservice.uproject.cn/configs/project/sandbox/static.application1.json | sed 's/"namespaceName":"static.application.json",//g' | sed 's/"appId":"project",//g' >> /nginx/static/js/config.js

md5Str=$(md5sum /nginx/static/js/config.js | cut -d ' ' -f1)
mv /nginx/static/js/config.js /nginx/static/js/config_${md5Str}.js

sed -i 's%<!--serverConfigSlot-->%<script src="/static/js/config_'$md5Str'.js" type="text/javascript"></script>%g' /nginx/index.html
複製代碼