关于前端:饿了么开源自研多端框架-MorJS

28次阅读

共计 3541 个字符,预计需要花费 9 分钟才能阅读完成。

开源我的项目地址:https://github.com/eleme/morjs,欢送试用 ~

喜爱么?或者对您有用?☞ 立刻去 ⭐️ Star ⭐️ 一下 ☞

MorJS 是什么?

简介

Mor (发音为 /mɔːr/,相似 more) 是饿了么开发的 一款 基于小程序 DSL 的,可扩大的多端研发框架。

应用 MorJS,咱们只需书写一套(微信或支付宝)小程序,就能够通过 MorJS 的 转端编译能力 ,将源码别离编译出能够公布在不同端(微信 / 支付宝 / 百度 / 字节 / 钉钉 / 快手 /QQ/ 淘宝 /H5)的产物。MorJS 还反对小程序、小程序插件、小程序分包之间的 状态转换 ,同时也装备了从源码到构建产物全阶段的 插件体系,满足各类性能扩大,晋升开发体验和开发效率。

示例

以下是饿了么 - 美食外卖频道在微信、支付宝、抖音小程序及 H5 中的体现:

为什么要做 MorJS?

目前各大平台都相继推出了本人的小程序,饿了么 C 端业务须要在不同平台小程序进行投放,这些我的项目大多是以支付宝或微信原生 DSL 编写,面对业务渠道的一直减少,咱们尝试了多种办法来兼容多端适配,但因为不同平台间小程序代码写法、能力反对的差异性逐渐变大,过来的计划无奈满足新业务的需要,咱们须要一套跨端研发框架能解决以下诉求:

  • 原生 DSL 反对,不便现有小程序 DSL 编写的存量业务应用;
  • 升高性能开销,尽可能轻运行时,缩小编译构建的时长;
  • 便捷的应用,一键转换为反对各小程序平台应用的产物;
  • 拓展的性能,提供针对大型简单小程序的解耦计划;
  • 灵便的配置,可能简略的减少批改多套不同端的我的项目配置;
  • 产物优化能力,压缩构建产物体积,缩小小程序包大小;

在明确这几点后,咱们调研了业界所有支流技术框架,发现并没有能齐全满足咱们需要的计划,所以咱们决定自研 MorJS。

如何应用?

MorJS 是基于小程序原生 DSL 进行扩大的,只有你把握微信或支付宝任意一种小程序,那你就简直把握了 MorJS。

MorJS 提供了官网脚手架工具用于创立新我的项目,同时也反对已有小程序引入相干依赖接入 MorJS。

开始一个新我的项目

MorJS 我的项目示例:https://github.com/eleme/morjs/tree/main/examples

  1. 创立我的项目,选定我的项目目录,在目录终端执行以下任一命令:
$ npm init mor # npm 创立我的项目
$ yarn create mor # yarn 创立我的项目
$ pnpm create mor # pnpm 创立我的项目
  1. 抉择对应的工程类型,依照提醒实现初始化操作
✔ 请抉择工程类型 › 小程序
✔ 请抉择源码类型 › 微信小程序 DSL
✔ 是否应用 Typescript … 否 / 是
✔ 请抉择 CSS 预处理器 › less
✔ 请输出 小程序 的名称 … myapp
✔ 请输出 小程序 的形容 … my first app
✔ 用户名 … yourUserName
✔ 邮箱 … your@gmail.com
✔ 请输出 Git 仓库地址 … https://github.com/yourUserName/myapp
✔ 请抉择 npm 客户端 › npm / pnpm / yarn
…
  1. 执行编译命令启动我的项目:
$ npm run dev
  1. 多端产物已构建在 dist 目录下,别离用对应平台的 IDE 关上即可开发预览

已有小程序我的项目接入

  1. 在已有我的项目中增加必要的依赖:
$ npm i @morjs/cli -D && npm i @morjs/core --save
  1. 在我的项目根目录下减少配置文件 mor.config.ts
import {defineConfig} from '@morjs/cli'

export default defineConfig([
  // 第一套配置: 微信 DSL 编译
  {
    name: 'wx',
    sourceType: 'wechat', // 源码类型: 微信 DSL
    target: 'wechat', // 编译指标: 微信
    compileMode: 'bundle', // 编译模式: 打包模式
  },
  // 第二套配置: 微信转支付宝
  {
    name: 'ali',
    sourceType: 'wechat', // 源码类型: 微信 DSL
    target: 'alipay', // 编译指标: 支付宝
    compileMode: 'bundle', // 编译模式: 打包模式
  },
  // 第三套配置: 微信转 Web
  {
    name: 'web',
    sourceType: 'wechat', // 源码类型: 微信 DSL
    target: 'web', // 编译指标: Web
    compileMode: 'bundle', // 编译模式: 打包模式
  }
])
  1. package.json 中配置脚本:
{
  "scripts": {
+   "dev": "mor compile -w",
+   "build": "mor compile --production"
  }
}
  1. 在我的项目目录终端下执行编译命令启动我的项目:
$ npm run dev
  1. 多端产物已构建在 dist 目录下,别离用对应平台的 IDE 关上即可开发预览。

MorJS 外围能力

多端编译:提供一码多端转换能力

从诞生之初,MorJS 的一个外围能力就是实现小程序一码多端的转换,让一套代码通过编译后对应的各端产物,别离在多个小程序平台上运行,让开发成本,招聘、治理、测试各方面老本都大幅降落。截止到目前,咱们曾经反对少数小程序平台的转换。

如果你对多端编译的实现感兴趣,可参见文档《MorJS 如何工作》

集成研发:提供简单小程序解耦开发能力

随着业务需要的一直减少,很多小程序我的项目不可避免的会呈现体积微小化的问题。尽管小程序官网提供了小程序分包、小程序插件的解决方案,但基于同一个小程序代码库,泛滥分包、插件的迭代状况简单,理论业务难以解耦。如果你的我的项目遇到相似的问题,能够应用 MorJS 提供的集成研发能力,把各个分包、插件、模块分成一个个独立的我的项目,并通过集成研发将小程序宿主和这些子模块通过拉包、编译、构建、合并等一系列解决,合并为一个残缺小程序进行开发、调试和部署。

如果你对集成研发的实现感兴趣,可参见文档《简单小程序集成》

状态互转:提供小程序多状态转换能力

如果你的我的项目没有相似诉求能够跳过本段内容)随着投放场景的减少,不同业务在不同小程序端的状态可能并不相同。例如一个在支付宝端的小程序利用,在某些场景下心愿他以分包的模式接入到微信小程序中。于是让我的项目在独立小程序、小程序插件、小程序分包利用状态间相互转换成为一个难题。

MorJS 提供的状态一体化能力,能够在尽量减少业务代码批改的前提下,提供 同一个我的项目在以不同端(微信、支付宝、淘宝、抖音等)不同状态(小程序、小程序插件、小程序分包)间的转换能力。

如果你对状态一体化的实现感兴趣,可参见文档《小程序状态一体化》

H5 同构:提供小程序 DSL 转 H5 能力

除了多端多状态的小程序外,不少开发者还面临着 H5 场景的投放。对此,MorJS 提供将小程序我的项目转换为 Web 我的项目的能力。这一能力的外围是将小程序转换成一个基于 React 的我的项目产物。无论是整个工程项目的转码、或是单个组件的编译,MorJS 都可能反对。

如果你对转 Web 开发的实现感兴趣,可参见文档《MorJS Web 开发》

其余

除此上述外围能力外,MorJS 围绕小程序实现了一系列研发生态能力的建设,包含但不限于以下:

  • 条件编译:提供对于多端或不同环境构建产出不同代码的能力,更加灵便的解决不同场景的适配问题;
  • 产物压缩:提供了不同类型文件的最小化兼容压缩形式,并保留配置选项对高级压缩计划的扩大反对;
  • Mock 能力:提供小程序本地 JSAPI mock 能力,解决开发阶段无奈联调接口申请数据的痛点;

劣势与现状

MorJS 的劣势

如你所见,MorJS 是一套基于小程序 DSL (支付宝或微信) 的框架。他的易用性、标准化和灵活性,使得开发者能更好地专一于业务,升高研发、调试老本,进步开发者的工作效率。

应用现状

截止目前,MorJS 反对 4 种编译状态(小程序、小程序插件、小程序分包、H5),撑持了饿了么 C 端大多数业务在各个渠道上的研发和投放。通过 MorJS 的开源,咱们冀望能把其中的技术细节、架构设计和技术思考出现给大家,为有相似多端同构需要的企业和开发者服务。

结语

MorJS 为饿了么解决了大量业务在多端研发上的差别问题,让小程序开发的重心回到产品业务自身,缩小使用者对多端差别兼容的投入,在通过开源让大家更好地理解和应用这项技术的同时,咱们也心愿可能借此吸引到更多志趣相投的小伙伴参加共建,一起减速小程序一码多端能力的倒退。欢送宽广小程序开发者们与咱们交换。

以上是对 MorJS 的简略介绍,如果想要具体理解可通过下述形式:

  • GitHub:https://github.com/eleme/morjs
  • 官网地址:https://mor.eleme.io/
  • 退出 MorJS 社区服务群:钉钉扫码或搜寻群号「29445021084」征询或理解更多 👇

正文完
 0