MorJS 多端适配输出目录结构说明
这里主要是阐述输出目录,整体的 NPM 组件
说明,请参考下面的组件示例说明环节
exmaple-component
的 package.json
配置示例
{
"name": "exmaple-component",
// 缺省目录设置,JS 入口文件为 lib/index.js,
// 未指定端的小程序组件文件会从该目录下获取,
// 如将该字段配置为 "lib/index.js", 则有可能会
// 无法找到正确的组件文件
"main": "lib",
// 微信小程序的入口配置,请注意,只需要配置目录名即可
"miniprogram": "miniprogram_dist",
// 支付宝小程序的入口配置,请注意,只需要配置目录名即可
"alipay": "alipay",
// 建议配置只输出组件内容目录
"files": [
"lib",
"miniprogram_dist",
"alipay"
]
}
exmaple-component
的整体输出目录结构示例
- lib
- index.js
- index.axml
- index.acss
- index.json
- miniprogram_dist
- lib
- index.js
- index.wxml
- index.wxss
- index.json
- alipay
- lib
- index.js
- index.wxml
- index.wxss
- index.json
- package.json
请注意: miniprogram_dist 和 alipay 目录下是有 lib 目录的!
使用方引用 NPM 组件
示例
{
"usingComponents": {
"demo-component": "exmaple-component/lib/index"
}
}
MorJS 编译说明
默认情况下,使用方引用组件 exmaple-component
去掉多端专属的那个目录就可以了。在不同端下 MorJS 会根据组件的 package.json
中的相关入口字段,如 miniprogram
字段来自动匹配加上对应的路径,来确保使用方只需一个引用路径,即可在多个端上生效。