MorJS 多端适配输出目录结构说明

2024-01-25 11:51 更新

这里主要是阐述输出目录,整体的 NPM 组件 说明,请参考下面的组件示例说明环节

exmaple-componentpackage.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 字段来自动匹配加上对应的路径,来确保使用方只需一个引用路径,即可在多个端上生效。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号