FE主导打造一个运营活动平台

布景

现今互联网公司，一般城市有一些运营类活动，如公司活动宣传、节沐日优惠促销等，在电商类公司更是需要频仍的上（下）线运营活动。

在这里要说明一下，本文讲的并非类似易企秀这样的建造“手机幻灯片、H5场景利用”的运营平台，而是一些常规运营活动。固然假如要做幻灯片滑屏结果，也可以开辟一个“幻灯片组件”。

那末，若何上线一个运营活动呢？传统流程以下：

1. 需求收集
2. 专题建造：页面切图、结果实现、接口开辟
3. QA测试
4. 上线
5. 活动竣事，手动下线

传统开辟方式存在以下几个弱点：

• 周期长，从常常每个运营活动都做为一个自力的Mini项目停止
• 开辟职员大量反复劳动，没法（未便）复用一些之前运营活动中开辟过的功用，比如设备分享、与App的交互等
• 运营活动投放进程中，点窜未便，如bug fix、点窜文案，正规公司也需要一个完整的上线流程

为处理这些题目，很多公司都推出了自己的运营活动平台。比如淘宝早期的eCRM-图腾，到今朝的同一营销平台UMP、蚂蚁金服的闪蝶（闪蝶更像易企秀）、京东的通天塔等，都是很是优异的平台工具。

那末，若何开辟一款精彩轻盈的运营活动平台呢？本文为大师供给一种新思绪：操纵组件化的方式开辟一个运营活动平台

平台架构图

平台架构图

平台架构说明

mongonDB供给数据存储；Node.js供给平台接口、文件处置等办事；PM2用来治理项目；组件脚手架，为介入组件开辟（自界说组件）的同学供给一个快速起头的工具，避免复制粘贴；组件库，组成运营活动页面的骨架；平台，由平台根本功用（页面设置）和N个组件（包括组件的数据项）组成；终极天生一个运营活动页面；

平台操纵流程

平台操纵流程

平台依靠的“技术栈”

1. React-前端JavaScript库
2. Redux-状态治理，在所见即所得（实时输入=>输出）的专题预览发挥最高文用
3. Redux Form-表单数据治理，并负责背景复杂逻辑展现，以及表单设置项的数据联动
4. webpack-项目构建工具
5. Node.js-办事端功用支持，供给背景数据接口
6. MongoDB-数据存储
7. 假如需要静态接口（平台不能供给）支持，放到组件预览的实现部分即可；

开辟一个平台组件

一个组件就是一个完整的NPM包，基于此，任何FE同学都可以自力开辟一款自界说组件，只需要公布到私有NPM（固然也可以托管到github等公网平台）即可。

除了NPM所必须的package.json、用于组件开辟的webpack/postcss.config.js/.eslint/.npmignore设置等文件之外，凡是一个组件凡是由以下几部分组成：

1. config.json-组件默许设置，用于组件初始化数据，包括范例、称号、分组（tag）、开辟者信息、默许款式、支持终端范例等；
2. thumb.jpg-表示图，用于用户挑选增加组件时的组件预览；
3. src/components/ConfigForm.jsx-组件表单设置；
4. src/components/Preview.jsx-按照ConfigForm的数据设置、静态接口拉取数据，实时预览组件的显现（见下方结果图，该图片组件中，用到了RD供给的图片上传接口）；
5. src/dev.jsx、src/preview.jsx、src/config.jsx-当地开辟组件时的进口（webpack中的entry），按照dev/production判定进口文件是dev还是preview/config；假如是生产情况，会天生dist/preview.js和dist/config.js两个文件，在运营平台下增加组件时，会读取组件打包的这两个文件；
6. src/dev.scss、src/main.scss-开辟情况的款式和组件的款式，打包后，会天生dist/config.css和dist/preview.css

实现结果

实现结果

webpack设置留意事项

1. output中要指定umdNamedDefine为'true'，否则打包出来的文件在平台中import时会报错
2. 生产情况下，要指定externals，将react、react-dom、redux-form、react-redux等依靠包解除，以减小和优化打包文件体积
3. css-loader中，开启modules模块，并将process.env.npm_package_name加入localIdentName设置中，如此打包出来的css文件中的class称号包括了组件名（而组件是不成以重名的，否则也没法publish到不异npm平台上），连系hash:base64:10，为css的class称号避免反复供给更多保障；

在运营平台项目中治理组件

运营平台需要为有权限的用户供给组件治理的功用，包括新增、升级、禁用组件，新增组件时，按照组件的唯一标识package_name来判定组件能否存在。别的，假如是公布到私有npm平台，能够需要判定组件称号能否正当：私有npm包名常常会以@xxx/开首，用于区分私有npm包和公共npm包。

升级组件-原有组件假如停止了版本升级（在私有npm中发了新的版本），需要在平台组件治理中停止组件手动升级。

组件升级带来的益处：假定新版本组件中存在bug，未采用新组件的线上运营活动不会遭到影响。但也有个弊端：假定旧版本组件有bug，修复后，线上援用了有bug版本的运营活动需要手动公布。所以，平台需要供给按照援用组件检索的才能，且最好供给批量公布的功用；

平台中静态引入组件

在一个运营活动中加入一个组件时，若何静态引入已有组件呢？以设置文件JS为例，

注：convertName是对组件名字的处置

竣事语

比来，中台的概念吵的比力热。笔者以为，中台存在的最重要意义就是降本提效。以组件开辟的形式，开辟运营活动平台，可以由FE主导，节省很大开辟本钱，合适降本提效的初衷。大师倘使有更好的开辟思绪，接待留言交换。

作者简介

武明礼：58当地办事FE负责人。