扩展新端开发指南
开发示例体验
扩展新端demo示例仓库: https://github.com/chameleon-team/cml-extplatform-demo。 实现了微信端的基本扩展。
运行项目
- 首先全局安装支持扩展新端的脚手架
npm i chameleon-tool@1.0.3 -g。 - 全局安装
lerna对本项目进行管理npm i lerna -g。 - 在本仓库根目录执行
lerna bootstrap，这一步是安装外部依赖与建立本仓库npm包之间的依赖。 - 在
cml-demo-project目录执行cml demo dev, 用微信开发者工具打开cml-demo-project/dist/demo目录。
开发流程
采用lerna对开发的npm包进行管理，解决本地开发时多个npm包之间相互依赖的问题。lerna init即可创建一个lerna项目，建议直接用示例仓库进行修改。
1 确定名称 创建npm包
端标识，扩展一个新端首先要确定这个端的标识名称，例如微信小程序端为
wx,百度小程序端为baidu，这个标识决定了构建命令的名称、多态协议中的cmlType, 配置对象中的cmlType等。 示例中确定为demo。运行时npm包名称， 建议以
cml-${端标识名称}-runtime格式命名，示例中为cml-demo-runtime。api库npm包名称， 建议以
cml-${端标识名称}-api格式命名，示例中为cml-demo-api。内置组件npm包名称， 建议以
cml-${端标识名称}-ui-builtin格式命名，示例中为cml-demo-ui-builtin。扩展组件npm包名称， 建议以
cml-${端标识名称}-ui格式命名，示例中为cml-demo-ui。数据管理npm包名称， 建议以
cml-${端标识名称}-store格式命名，示例中为cml-demo-store。编译插件npm包名称， 建议以
cml-${端标识名称}-plugin格式命名，示例中为cml-demo-plugin。
在packages目录创建上述的6个npm包。
2 创建开发cml项目
在packages目录创建一个cml的项目作为测试项目，开发过程中可以进行调试代码。示例中为cml-demo-project。
1 cml-demo-project的chameleon.config.js需要 添加extPlatform，babelPath，builtinNpmName字段的配置，配置如下：
cml.config.merge({
builtinNpmName: 'cml-demo-ui-builtin',
extPlatform: {
demo: 'cml-demo-plugin',
},
babelPath: [
path.join(__dirname,'node_modules/cml-demo-ui-builtin'),
path.join(__dirname,'node_modules/cml-demo-runtime'),
path.join(__dirname,'node_modules/cml-demo-api'),
]
})
你的项目中注意把示例npm包名称改成你命名的npm包名称。
- builtinNpmName 字段是你定义的内置npm包名称
- extPlatform是配置扩展新端的编译插件，key值为端标识，value为编译插件npm包名称。
- babelPath 配置运行时相关的三个npm包需要过babel
2 cml-demo-project的package.json的dependencies中添加这几个开发npm包。
"cml-demo-api": "1.0.0",
"cml-demo-plugin": "1.0.0",
"cml-demo-runtime": "1.0.0",
"cml-demo-ui-builtin": "1.0.0"
3 在仓库的根目录执行lerna bootstrap安装依赖，建立关联，这样cml-demo-project的node_modules下的这几个npm包会符号链接到packages下的同名npm包。
如何进行开发分工
- api的工作是独立的 不依赖其他npm包的开发
- runtime 运行时的工作也是独立的 不依赖其他npm包
- plugin中的模板编译 在事件绑定的代理函数中依赖runtime 其他的工作不依赖
- ui-builtin和 ui依赖runtime和plugin的完成 才能正确执行。 cml-tt-store的工作也是独立的，基本上小程序端实现是相同的。