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

原创 58本地服务终端 58本地服务终端技术

背景

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

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

那么，如何上线一个运营活动呢？传统流程如下：

需求收集
专题制作：页面切图、效果实现、接口开发
QA测试
上线
活动结束，手动下线

传统开发方式存在以下几个缺点：

周期长，从往往每个运营活动都做为一个独立的Mini项目进行
开发人员大量重复劳动，无法（不便）复用一些之前运营活动中开发过的功能，比如设置分享、与App的交互等
运营活动投放过程中，修改不便，如bug fix、修改文案，正规公司也需要一个完整的上线流程

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

那么，如何开发一款精美轻巧的运营活动平台呢？本文为大家提供一种新思路：利用组件化的方式开发一个运营活动平台

平台架构图

平台架构说明

mongonDB提供数据存储；Node.js提供平台接口、文件处理等服务；PM2用来管理项目；组件脚手架，为参与组件开发（自定义组件）的同学提供一个快速开始的工具，避免复制粘贴；组件库，构成运营活动页面的骨架；平台，由平台基础功能（页面配置）和N个组件（包括组件的数据项）构成；最终生成一个运营活动页面；

平台操作流程

平台依赖的“技术栈”

React-前端JavaScript库
Redux-状态管理，在所见即所得（实时输入=>输出）的专题预览发挥最大作用
Redux Form-表单数据管理，并负责后台复杂逻辑展示，以及表单配置项的数据联动
webpack-项目构建工具
Node.js-服务端功能支撑，提供后台数据接口
MongoDB-数据存储
如果需要动态接口（平台不能提供）支持，放到组件预览的实现部分即可；

开发一个平台组件

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

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

config.json-组件默认配置，用于组件初始化数据，包含类型、名称、分组（tag）、开发者信息、默认样式、支持终端类型等；
thumb.jpg-示意图，用于用户选择添加组件时的组件预览；
src/components/ConfigForm.jsx-组件表单配置；
src/components/Preview.jsx-根据ConfigForm的数据配置、动态接口拉取数据，实时预览组件的呈现（见下方效果图，该图片组件中，用到了RD提供的图片上传接口）；
src/dev.jsx、src/preview.jsx、src/config.jsx-本地开发组件时的入口（webpack中的entry），根据dev/production判断入口文件是dev还是preview/config；如果是生产环境，会生成dist/preview.js和dist/config.js两个文件，在运营平台下添加组件时，会读取组件打包的这两个文件；
src/dev.scss、src/main.scss-开发环境的样式和组件的样式，打包后，会生成dist/config.css和dist/preview.css

实现效果

webpack配置注意事项

output中要指定umdNamedDefine为'true'，否则打包出来的文件在平台中import时会报错
生产环境下，要指定externals，将react、react-dom、redux-form、react-redux等依赖包排除，以减小和优化打包文件体积
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版本的运营活动需要手动发布。所以，平台需要提供根据引用组件检索的能力，且最好提供批量发布的功能；