MorJS 小程序工程化框架技术调研

MorJS 是饿了么（Ele.me）开源的 小程序研发框架，强调 工程化、插件化与微信/支付宝双端适配，支持将微信或支付宝小程序转换为另一平台产物，并提供编译时优化。源自饿了么外卖/到店小程序实践。2026 年仍有一定维护，但社区规模小于 Taro/uni-app，适合 阿里系生态或需双向转换 的团队评估；通用新项目仍优先主流框架。

一、 基本信息

二、 技术定位与简介

MorJS 并非「新 UI 语法」框架，而是围绕 标准或类标准小程序源码 提供：

• 编译管道：@morjs/cli 构建、压缩、条件编译。
• 跨端转换：mor compile 将微信产物转支付宝或反向（API/组件映射）。
• 插件体系：生命周期、依赖分析、性能优化插件。
• TypeScript：一等支持 .ts 页面与配置。

与 Taro 的差异：MorJS 更偏 已有小程序代码资产的工程治理与双端同步；Taro 偏 用 React/Vue 写一套编译多端。

三、 快速上手安装说明

npm install -g @morjs/cli
mor init my-app
cd my-app
npm install
mor compile --name wechat --watch

小程序页面示例（类微信语法）

// pages/index/index.ts
Page({
  data: { count: 0 },
  onLoad() {
    console.log('page load')
  },
  onAdd() {
    this.setData({ count: this.data.count + 1 })
  }
})

<!-- pages/index/index.wxml -->
<view class="wrap">
  <text>Count: {{count}}</text>
  <button bindtap="onAdd">+1</button>
</view>

# 微信转支付宝
mor compile --name alipay --from wechat

四、 核心特性

1. 微信 ↔ 支付宝互转

组件与 API 映射表可配置扩展。

2. 插件化架构

@morjs/plugin-* 注入编译各阶段。

3. TypeScript 工程

类型定义与路径别名与 monorepo 友好。

4. 依赖分析

静态分析组件引用，辅助分包与 tree-shaking。

5. 多应用工作区

适合同一业务微信+支付宝双端仓库共存。

6. 与原生语法兼容

非强制 JSX；降低从原生小程序迁移门槛。

7. mor compile 增量编译

Watch 模式仅重编译变更页面，大型仓库本地开发可接受。

8. 自定义 Webpack 链

高级团队可注入 chainWebpack 接入企业内网 npm 镜像与代码扫描。

五、 适用场景

适合：饿了么/阿里本地生活系技术栈、已有一套微信原生小程序需快速出支付宝版、重视编译链插件定制、双端同步发版。

不适合：React/Vue 现代语法主导的新团队、需要十馀端小程序（抖音/快手/鸿蒙）、依赖超大社区 UI 库。

六、 技术亮点

1. 双向转换实用——外卖类业务双端并行常见痛点。
2. 工程化优先——插件、分析、CI 集成而非新 DSL。
3. 原生语法友好——存量原生页可渐进接入 MorJS 构建。
4. TypeScript 原生支持——大型小程序仓库类型安全。
5. 饿了么实战验证——高并发本地生活场景打磨。

七、 核心概念与架构

digraph MorJS_Arch {
  rankdir=LR
  node [shape=box, style="rounded,filled", fillcolor="#f0f9ff"]
  Src [label="小程序源码\n(wx/ml 语法)", fillcolor="#bae6fd"]
  CLI [label="@morjs/cli\n+ plugins"]
  Map [label="API/组件映射层"]
  WX [label="微信小程序包"]
  Ali [label="支付宝小程序包"]
 
  Src -> CLI
  CLI -> Map
  Map -> WX
  Map -> Ali
}

关键概念：mor.config.ts、compileMode、adapter 自定义映射、mor compile --name、plugin hooks（beforeCompile 等）。

八、 技术局限与边界

1. 端覆盖窄：主打微信+支付宝，其他小程序需自行扩展映射。
2. 社区小于 Taro/uni-app：问答、第三方教程较少。
3. 非 React/Vue 抽象：前端团队若要求现代框架语法，MorJS 不匹配。
4. 转换非 100%：复杂自定义组件、平台独有 API 需手工 adapter。
5. 绑定阿里系场景：外部公司长期支持依赖社区与自助。
6. Web 能力有限：H5 不是主力输出，跨端叙事弱于 uni-app。

九、 生态地图

• 核心：@morjs/cli、@morjs/compiler、morjs。
• 插件：@morjs/plugin-compiler-web、@morjs/plugin-compiler-wechat 等。
• 工具：mor init、mor doctor（环境检查）。
• 相关：Antmove（转换）、uni-app（全端）、Taro（语法层跨端）。
• 宿主：饿了么、口碑等阿里本地生活小程序。
• 对比 Antmove：Antmove 偏迁移工具；MorJS 偏长期双端工程仓库。
• 扩展阅读：饿了么技术博客曾分享 MorJS 在双端发版中的实践（检索关键词 morjs 饿了么）。

十、 生态集成

十一、 开发与工程化

• mor.config.ts 集中声明 sourceType、targets、plugins。
• 微信与支付宝差异 API 走 统一 facade，禁止页面散落双份实现。
• 为转换结果建立 快照测试（关键页面 wxml/json 对比）。
• 锁定 @morjs/* 版本；阅读 Release Note 中 mapping 表变更。
• 结合 miniprogram-ci 与支付宝 CI 分别自动上传。

十二、 性能与安全

• 编译期删除未引用组件与死代码，控制主包体积。
• 转换后仍需各端真机验证 setData 与渲染性能。
• 用户地理位置等敏感 API 按双端隐私规范分别配置。
• 密钥与签名逻辑仅服务端；客户端只做临时 token。
• 关注支付宝「小程序基础库」与微信版本矩阵，建立兼容表。

十三、 技术对比

十四、 最佳实践

1. 先跑官方 mor doctor，确保 CLI 与基础库版本匹配。
2. 转换规则 版本化 入库，映射变更可 code review。
3. 核心业务（下单、支付）双端各做 E2E，不信「一次编译处处正确」。
4. 若团队同时要 H5/App，MorJS 仅作小程序层，上层另选 uni-app/Taro。
5. 关注 morjs GitHub Releases 与映射表 diff。

十五、 学习与社区资源

• 官方文档：https://mor.eleme.io/mor/docs/
• GitHub：https://github.com/eleme/morjs
• 快速开始：https://mor.eleme.io/mor/docs/quickstart/overview
• 微信开放文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
• 支付宝小程序文档：https://opendocs.alipay.com/mini