江苏龙网

  1. 主页 > 生活百科 > >

一码跑遍众多小程序，饿了么开源自研多端框架 MorJS

MorJS

作者 | MorJS 技术团队出品 | 阿里巴巴终端技术Mor (发音为 /m??r/，类似 more) 是饿了么开发的一款基于小程序 DSL 的，可扩展的多端研发框架 。
使用 MorJS，我们只需书写一套（微信或支付宝）小程序，就可以通过 MorJS 的转端编译能力，将源码分别编译出可以发布在不同端（微信/支付宝/百度/字节/钉钉/快手/QQ/淘宝/H5）的产物 。MorJS 还支持小程序、小程序插件、小程序分包之间的形态转换，同时也配备了从源码到构建产物全阶段的插件体系，满足各类功能扩展，提升开发体验和开发效率 。
以下是饿了么-美食外卖频道在微信、支付宝、抖音小程序及 H5 中的表现：

一码跑遍众多小程序，饿了么开源自研多端框架 MorJS

文章插图
 
为什么要做 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 创建项目2.选择对应的工程类型，按照提示完成初始化操作
? 请选择工程类型 › 小程序? 请选择源码类型 › 微信小程序 DSL? 是否使用 Typescript … 否 / 是? 请选择 css 预处理器 › less? 请输入 小程序 的名称 … myApp? 请输入 小程序 的描述 … my first app? 用户名 … yourUserName? 邮箱 … your@gmail.com? 请输入 Git 仓库地址 … https://github.com/yourUserName/myapp? 请选择 npm 客户端 › npm / pnpm / yarn…【一码跑遍众多小程序，饿了么开源自研多端框架 MorJS】3.执行编译命令启动项目：
 $ npm run dev4.多端产物已构建在_ dist_ 目录下，分别用对应平台的 IDE 打开即可开发预览
已有小程序项目接入
1.在已有项目中添加必要的依赖：
$ npm i @morjs/cli -D && npm i @morjs/core --save2.在项目根目录下增加配置文件_ 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', // 编译模式: 打包模式 }])3.在_ package.json_ 中配置脚本：
{ "scripts": {


推荐阅读


上一篇：大模型111人：谷歌和OpenAI的人才战争

下一篇：穿衣搭配|殷桃的穿法普通女性值得借鉴，时尚优雅又减龄