Mor (发音为 /mr/,类似 more),是饿了么开发的一款基于小程序 DSL 的,可扩展的多端研发框架,使用小程序原生 DSL 构建,使用者只需书写一套(微信或支付宝)小程序,就可以通过 Mor 的转端编译能力,将源码分别编译出可以在不同端(微信/支付宝/百度/字节/钉钉/快手/QQ/淘宝/Web…)运行的产物。
MorJS 以多端编译为基础,配以面向全生命周期的插件体系,覆盖从源码到构建产物的每个阶段,支持各类功能扩展和业务需求,无论是基础的页面和组件还是复杂的分包和插件,MorJS 都可以胜任,帮助你高效地开发多端小程序。
核心能力
Mor 是一套基于小程序 DSL (支付宝或微信) 的框架。他的易用性、标准化和灵活性,使得开发者能更好地专注于业务,让开发成本,招聘、管理、测试各方面成本都大幅下降,提高开发者的工作效率。
- 易用性: DSL 支持:可使用微信小程序 DSL 或 支付宝小程序 DSL 编写小程序,无额外使用成本; 多端支持:支持将一套小程序转换为各类小程序平台及 Web 应用, 节省双倍人力; 快速接入:仅需引入两个包,增加一个配置文件,即可简单快速接入到现有小程序项目;
- 标准化: 开箱即用:内置了脚手架、构建、分析、多端编译等完整研发能力,仅需一个依赖即可上手开发; 表现一致:通过编译时+运行时抹平多端差异性,让不同平台的小程序获得一致的用户体验; 形态转换:支持同一个项目的不同的形态,允许小程序、分包、插件不同形态之间的相互转换;
- 灵活性: 方便扩展:Mor 将完备的生命周期和内部功能插件化,使用插件(集)以满足功能和垂直域的分层需求; 类型支持:除小程序标准文件类型外,还支持 ts、less/scss、jsonc/json5 等多种文件类型; 按需适配:可根据需求选择性接入适配能力,小项目仅需编译功能,中等项目可结合编译和页面注入能力,大型项目推荐使用复杂小程序集成能力;
示例
以下是饿了么-美食外卖频道在微信、支付宝、抖音小程序及 H5 中的表现。
快速开始
环境准备
MorJS 项目基于 node,请确保已具备较新的 node 环境(>=14),推荐使用 node 版本管理工具 nvm 来管理 node(Windows 下使用 nvm-windows),这样可以很方便地切换 node 版本,全局安装时候也不必再使用 sudo。
# mac 或 linux 下安装 nvm
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
$ nvm -v
0.39.1
# 安装 node
$ nvm install 14
$ nvm use 14
$ node -v
v14.21.3
创建项目
Mor 提供了 create-mor 和 mor cli 工具两种方式来创建新项目,选择其中任一一种即可。
使用 create-mor 创建项目
确保你安装了符合版本的 Node.js,选定项目目录
$ mkdir myapp && cd myapp # 创建项目目录
在目录终端执行以下任一命令:
$ npm init mor # npm 创建项目
$ yarn create mor # yarn 创建项目
$ pnpm create mor # pnpm 创建项目
这一指令将会安装并执行 create-mor,它是 Mor 官方的项目脚手架工具。
使用 mor cli 创建项目
确保你安装了符合版本的 Node.js,创建项目目录,全局安装 mor cli 工具
$ mkdir myapp && cd myapp # 创建项目目录
$ npm i @morjs/cli -g # 全局安装 mor cli
$ mor -v # 查看全局 mor 版本
此时你已安装了 mor cli 工具,然后通过 mor init 命令即可创建项目:
$ mor init
初始化项目
创建项目后你会看到如下命令号交互界面,选择对应的工程类型,按照提示完成初始化操作:
请选择工程类型 > 小程序
请选择源码类型 > 微信小程序 DSL
是否使用 Typescript … 否 / 是
请选择 CSS 预处理器 > less
请输入 小程序 的名称 … myapp
请输入 小程序 的描述 … my first app
用户名 … yourUserName
邮箱 … your@gmail.com
请输入 Git 仓库地址 … https://github.com/yourUserName/myapp
请选择 npm 客户端 > npm / pnpm / yarn
…
[mor] 安装 node_modules 完成!
[mor] 小程序项目初始化完成 ^_^ 在终端运行命令
npm run dev
即可启动项目。
在项目初始化之后,Mor 会默认开始安装项目所需要的依赖,一般来说,依赖安装会自动完成,但某些情况下可能会安装失败,这时候你可以在项目目录下自己使用安装命令进行安装:
$ npm i
编译运行
使用 MorJS 的 compile 命令可以把 MorJS 代码编译成不同端的代码,然后在对应的开发工具中查看效果。MorJS 初始的编译命令配置了 dev 和 build 两种模式:
- dev 模式(增加 --watch 参数)将会监听文件修改。
- build 模式(增加 --production 参数)将对代码进行压缩打包。
执行 npm run dev 命令,进行浏览调试:
[mor] i 发现配置文件: mor.config.ts
[mor] 配置文件加载成功: mor.config.ts
[mor] i 准备配置中, 即将开始编译
配置名称: wechat-miniprogram
编译目标: 微信小程序
编译环境: development
编译类型: 小程序
编译模式: bundle
源码类型: wechat
源码目录: src
输出目录: dist/wechat
[mor] i 已开启缓存, 可通过 --no-cache 关闭
[mor] i 启动文件监听模式
[mor] i 开始编译 ...
[mor] i 依赖分析中 ...
[mor] i 依赖分析完成: 耗时: 25.125412 ms
[mor] 编译完成, 耗时: 1451.202285 ms
[mor] i 准备配置中, 即将开始编译
配置名称: alipay-miniprogram
编译目标: 支付宝小程序
编译环境: development
编译类型: 小程序
编译模式: bundle
源码类型: wechat
源码目录: src
输出目录: dist/alipay
[mor] i 已开启缓存, 可通过 --no-cache 关闭
[mor] i 启动文件监听模式
[mor] i 开始编译 ...
[mor] i 依赖分析中 ...
[mor] i 依赖分析完成: 耗时: 24.112123 ms
[mor] 编译完成, 耗时: 441.548922 ms
多端产物已构建在 dist 目录下,分别用对应平台的 IDE 打开即可开发预览:
- 在 微信开发者工具 中打开 dist/wechat 目录即可开始微信小程序开发预览
- 在 支付宝小程序开发者工具 中打开 dist/alipay 目录即可开始微信小程序开发预览
什么时候不用 MorJS
如你所见,MorJS 是一套基于小程序 DSL (支付宝、微信) 的框架,如果你,
- 期望使用 React 或 Vue 的方式来编写小程序
- 期望使用 Web 的方式开发
- 有很强的 webpack 自定义需求和主观意愿
- 需要以 微信小程序或支付宝小程序 DSL 以外的方式开发
- 需要跑在 Node 14 以下的环境中
MorJS 可能不适合你。
传送门
开源协议:MIT
开源地址:https://github.com/eleme/morjs
项目合集:https://github.com/RepositorySheet