MorJS 小程序形态一体化 实现方案

为了帮助大家更好的理解一体化方案的逻辑，这里会通过一些示例性的代码来解释下一体化背后的实现思路，实际的实现代码会复杂很多，有兴趣的同学可以直接看 MorJS 源码。

入口配置说明​

不同形态的入口文件可通过配置 compileType 来指定：

• miniprogram: 以小程序的方式编译, 入口配置文件为 app.json
• plugin: 以插件的方式编译, 入口配置文件为 plugin.json
• subpackage: 以分包的方式编译, 入口配置文件为 subpackage.json

有关 MorJS 配置文件说明可参见文档：MorJS 基础 - 配置

入口文件配置示例如下：

/* 配置示例 */

// 小程序 app.json 配置示例
// 详细配置可参见微信小程序或支付宝小程序 app.json 配置
{
  "pages": [
    "pages/todos/todos",
    "pages/add-todo/add-todo"
  ],
  // subpackages 或 subPackages 均可
  "subPackages": [
    {
      "root": "my",
      "pages": [
        "pages/profile/profile"
      ]
    }
  ]
}

// 小程序插件 plugin.json 配置示例
// 详细配置可参见微信小程序或支付宝小程序 plugin.json 配置
{
  "publicComponents": {
    "list": "components/list/list"
  },
  "publicPages": {
    "hello-page": "pages/index/index"
  },
  "pages": [
    "pages/index/index",
    "pages/another/index"
  ],
  // 插件导出的模块文件
  "main": "index.js"
}

// 小程序分包 subpackage.json 配置示例
// 配置方式同 app.json 中的 subpackages 的单个分包配置方式一致
{
  // type 字段为 mor 独有, 用于标识该分包为 "subpackage" 或 "main"
  // 区别是: 集成时 "subpackage" 类型的分包会被自动合并到 app.json 的 subpackages 字段中
  //              "main" 类型的分包会被自动合并到 app.json 的 pages 字段中 (即: 合并至主包)
  "type": "subpackage",
  // root 字段将影响集成时分包产物合并至宿主小程序时的根目录
  "root": "my",
  // 注意: 编译分包以 pages 作为实际路径进行解析
  "pages": [
    "pages/profile/profile"
  ]
}

默认情况下不同 compileType 对应的入口配置文件会直接从 srcPath 和 srcPaths 所指定的源码目录中直接载入。

如需要定制入口配置文件的路径可通过 customEntries 配置 来自定义。

差异抹平思路​

多形态下的 getApp 调用和 App 生命周期抹平​

通过在小程序插件和小程序分包模式下增加 app.js 入口文件的支持，并模拟 App 生命周期调用和为所有的页面和组件注入 getApp 方法来实现，具体可参见下图示例：

多形态下的全局样式支持（如 app.acss 或 app.wxss）​

小程序编译时通过自动将全局样式文件（app.acss 或 app.wxss 等）注入到每个页面和组件的样式文件中作为引用来实现对全局样式的兼容，具体可参见下图示例：

NPM 组件库支持差异抹平​

基于 MorJS 本身提供的 bundle 模式，结合 多端组件库规范 和 JS 依赖库规范 来自动在编译的过程中，自动将小程序、小程序插件、小程序分包的 JS 依赖统一打包并将使用到的组件库自动提取到 npm_components 文件夹来规避不同形态下的依赖问题以及不同小程序平台本身的 NPM 支持差异问题，编译流程如下：