背景
当今互联网公司，一般都会有一些运营类活动，如公司活动宣传、节假日优惠促销等，在电商类公司更是需要频繁的上（下）线运营活动。
在这里要说明一下，本文讲的并
非类似易企秀这样的制作“手机幻灯片、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版本的运营活动需要手动发布。所以，平台需要提供根据引用组件检索的能力，且最好提供批量发布的功能；
平台中动态引入组件
在一个运营活动中加入一个组件时，如何动态引入已有组件呢？以配置文件JS为例，
注：convertName是对组件名字的处理
结束语
最近，中台的概念吵的比较热。笔者以为，中台存在的最重要意义就是降本提效。以组件开发的形式，开发运营活动平台，可以由FE主导，节省很大开发成本，符合降本提效的初衷。大家如果有更好的开发思路，欢迎留言交流。
作者简介
武明礼：58本地服务FE负责人。