快速开发

1、开发组件

以 demo 组件为例，即文件夹为 demo，组件名也叫 demo，组件的 code 也叫 demo

+-- demo
|   +-- src
|       +-- index.jsx       // 组件入口（必须）
|       +-- setting.js      // 组件设置项（必须）
|       +-- setupProxy.js   // 代理文件（必须）
|   +-- .env                // 默认环境文件（必须）
|   +-- .env.production     // 构建环境文件（必须）
|   +-- mjd-config.js       // Webpack配置文件（详情见 mjd-config.js 描述）
|   +-- README.md           // 组件说明文档
|   +-- package.json        // 组件名、版本号、组件依赖包[不包括 react + mobx 技术栈相关框架]

package.json 文件扩展参数， config 是组件在初始化时所必须的配置数据

{
    "name": "custom_component_code" // 组件name需以custom_开头
    "version": "1.0.0",
    "description": "组件描述",
    "author": "yourname@jd.com",
    "config": {
       "name": "组件名称",
       "width": 400,
       "height": 300,
       "childrenCom": [ // childrenCom：如果存在子组件此配置`必须`
          {
            "code": "custom_component_code_map_traffic",
            "name": "交通路况"
          },
          {
            "code": "custom_component_code_map_geo",
            "name": "轨迹飞线"
          }
       ]
    }
}

mjd-config.js 文件描述

module.exports = {
  custom: {}, // 根据webpack结构，对配置进行覆盖
  override: (config) => config // 根据已经生成的config，进行修改
};

这时我们需要 cd 到当前组件（demo 下）的目录中，使用命令 npm start 启动项目，开始自定义组件的开发了

开发过程中需要注意的几个问题

1. setting.js 会读取当前组件的 package.json 中的 name 和 version 字段，name 字段作为 code 用，所以 pakage.json 中的 name 字段 = setting 中 code = 组件名 = 文件夹名， 否则加载不出来。

2. 关于 code 的问题：即 package.json 中的 name 字段。code 是组件的唯一标识，我们通过组件的 code 和版本 version 来唯一确定一个组件。

3. 组件集市中的组件描述会先读取 README.md 中的内容作为显示，如果 README.md 文件不存在会读取 package.json 文件中的 description 字段内容作为显示。

2、打包

1. 开发完成之后 npm run build 打包组件

2. 打完包之后，会和 src 同级的生成一个 build 文件夹

3. 此时 build 文件夹下会生成一个压缩包，将压缩包上传到开放平台即可