基于小程序 DSL(微信、支付宝)的,可扩展的多端研发框架

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-mormor 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 初始的编译命令配置了 devbuild 两种模式:

  • 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

原文链接:,转发请注明来源!