前端分级配置

时间 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
复制代码

运行期：

运行期就比较简单了，若是须要全局加载的配置，在框架初始化以前，加载便可

如banner之类实时的配置，在页面加载先后均可以

阅读原文