我的开源
前端分级配置
随着前端工程的逐渐庞大和完善， 很多原先后端的功能开始又前端接管，加上spa的流行，前端配置的重要性日益重要
1. 由后端模板渲染的前端项目
流程如下
配置信息可以由后端项目维护， 在渲染前传到前端，完成页面和逻辑。 该方式下配置来源简单，并且可以满足所有的需求
2. 前后端分离
分离之后，路由、页面加载逻辑都有了很大的变化， 不再是由一次加载就能完美解决的， 如下图， 有多种配置及时机需要我们考虑
a. 第一个解决方案
ssr的同构方案，框架比较多， 使用服务端渲染，好多自然是很多的， 但是局限性也很大， 服务端渲染是无状态的， 所以对于业务复杂的情况，对于编码会有很大挑战
该方案可以看对于框架的描述
b. 第二个方案，分级配置
如上图描述，配置分成了多个环节并且场景也各不相同，分级配置的特点就是利用前端的各个环节，将配置分解合并
大家会发现，也行有些配置是会重的， 构建期要用， 运行期也需要用，这时候就需要配置覆盖， 上图星越多表示越灵活
依次，我们就可以确定配置覆盖优先级
下面我们细说下三级配置，如何实现
构建期：
以webpack为例
构建本身会传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.jsmd5Str=$(md5sum /nginx/static/js/config.js | cut -d ' ' -f1)
mv /nginx/static/js/config.js /nginx/static/js/config_${md5Str}.jssed -i 's%<!--serverConfigSlot-->%<script src="/static/js/config_'$md5Str'.js" type="text/javascript"></script>%g' /nginx/index.html
运行期：
运行期就比较简单了， 如果需要全局加载的配置， 在框架初始化之前，加载即可
如banner之类实时的配置， 在页面加载前后都可以
标题：前端分级配置
作者：hugh0524
地址：https://blog.uproject.cn/articles/2019/07/24/1563938627602.html
0 0