开发者文档
快速开始
1. 下载模板
- npx @jkyu/create-monet-app init
- 选择
STUDIO-*开始的模板，本示例使用的STUDIO-DEMO-JS
2. 运行组件
- npm install
- npm start
3. 构建组件
- npm run build
4. 组件更新
- npm run update
- update 视频介绍
开发
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 启动项目，开始自定义组件的开发了
开发过程中需要注意的几个问题
- setting.js 会读取当前组件的 package.json 中的 name 和 version 字段，name 字段作为 code 用，所以 pakage.json 中的 name 字段 = setting 中 code = 组件名 = 文件夹名， 否则加载不出来。
- 关于 code 的问题：即 package.json 中的 name 字段。code 是组件的唯一标识，我们通过组件的 code 和版本 version 来唯一确定一个组件。
- 组件集市中的组件描述会先读取 README.md 中的内容作为显示，如果 README.md 文件不存在会读取 package.json 文件中的 description 字段内容作为显示。
2、打包
开发完成之后
npm run build打包组件打完包之后，会和 src 同级的生成一个 build 文件夹
此时 build 文件夹下会生成一个压缩包，将压缩包上传到开放平台即可
组件指南 →