簡介

Mor (發(fā)音為 /m??r/，類似 more) 是餓了么開發(fā)的一款基于小程序 DSL 的，可擴(kuò)展的多端研發(fā)框架。

使用 MorJS，我們只需書寫一套（微信或支付寶）小程序，就可以通過 MorJS 的轉(zhuǎn)端編譯能力，將源碼分別編譯出可以發(fā)布在不同端（微信/支付寶/百度/字節(jié)/釘釘/快手/QQ/淘寶/H5）的產(chǎn)物。MorJS 還支持小程序、小程序插件、小程序分包之間的形態(tài)轉(zhuǎn)換，同時(shí)也配備了從源碼到構(gòu)建產(chǎn)物全階段的插件體系，滿足各類功能擴(kuò)展，提升開發(fā)體驗(yàn)和開發(fā)效率。

示例

以下是餓了么-美食外賣頻道在微信、支付寶、抖音小程序及 H5 中的表現(xiàn)：

為什么要做 MorJS？

目前各大平臺(tái)都相繼推出了自己的小程序，餓了么 C 端業(yè)務(wù)需要在不同平臺(tái)小程序進(jìn)行投放，這些項(xiàng)目大多是以支付寶或微信原生 DSL 編寫，面對(duì)業(yè)務(wù)渠道的不斷增加，我們嘗試了多種方法來兼容多端適配，但由于不同平臺(tái)間小程序代碼寫法、能力支持的差異性逐步變大，過去的方案無法滿足新業(yè)務(wù)的需求，我們需要一套跨端研發(fā)框架能解決以下訴求：

原生 DSL 支持，方便現(xiàn)有小程序 DSL 編寫的存量業(yè)務(wù)使用；

降低性能開銷，盡可能輕運(yùn)行時(shí)，減少編譯構(gòu)建的時(shí)長；

便捷的使用，一鍵轉(zhuǎn)換為支持各小程序平臺(tái)使用的產(chǎn)物；

拓展的功能，提供針對(duì)大型復(fù)雜小程序的解耦方案；

靈活的配置，能夠簡單的增加修改多套不同端的項(xiàng)目配置；

產(chǎn)物優(yōu)化能力，壓縮構(gòu)建產(chǎn)物體積，減少小程序包大小；

在明確這幾點(diǎn)后，我們調(diào)研了業(yè)界所有主流技術(shù)框架，發(fā)現(xiàn)并沒有能完全滿足我們需求的方案，所以我們決定自研 MorJS。

如何使用？

MorJS 是基于小程序原生 DSL 進(jìn)行擴(kuò)展的，只要你掌握微信或支付寶任意一種小程序，那你就幾乎掌握了 MorJS。

MorJS 提供了官方腳手架工具用于創(chuàng)建新項(xiàng)目，同時(shí)也支持已有小程序引入相關(guān)依賴接入 MorJS。

開始一個(gè)新項(xiàng)目

MorJS 項(xiàng)目示例：https://github.com/eleme/morjs/tree/main/examples

創(chuàng)建項(xiàng)目，選定項(xiàng)目目錄，在目錄終端執(zhí)行以下任一命令：

$?npm?init?mor?#?npm?創(chuàng)建項(xiàng)目
$?yarn?create?mor?#?yarn?創(chuàng)建項(xiàng)目
$?pnpm?create?mor?#?pnpm?創(chuàng)建項(xiàng)目

選擇對(duì)應(yīng)的工程類型，按照提示完成初始化操作

?請(qǐng)選擇工程類型???小程序
?請(qǐng)選擇源碼類型???微信小程序?DSL
?是否使用?Typescript?…?否?/?是
?請(qǐng)選擇?CSS?預(yù)處理器???less
?請(qǐng)輸入?小程序?的名稱?…?myapp
?請(qǐng)輸入?小程序?的描述?…?my?first?app
?用戶名?…?yourUserName
?郵箱?…?your@gmail.com
?請(qǐng)輸入?Git?倉庫地址?…?https://github.com/yourUserName/myapp
?請(qǐng)選擇?npm?客戶端???npm?/?pnpm?/?yarn
…

執(zhí)行編譯命令啟動(dòng)項(xiàng)目：

$?npm?run?dev

多端產(chǎn)物已構(gòu)建在_ dist_ 目錄下，分別用對(duì)應(yīng)平臺(tái)的 IDE 打開即可開發(fā)預(yù)覽

已有小程序項(xiàng)目接入

在已有項(xiàng)目中添加必要的依賴：

$?npm?i?@morjs/cli?-D?&&?npm?i?@morjs/core?--save

在項(xiàng)目根目錄下增加配置文件_ mor.config.ts_

import?{?defineConfig?}?from?'@morjs/cli'

export?default?defineConfig([
??//?第一套配置:?微信?DSL?編譯
??{
????name:?'wx',
????sourceType:?'wechat',?//?源碼類型:?微信?DSL
????target:?'wechat',?//?編譯目標(biāo):?微信
????compileMode:?'bundle',?//?編譯模式:?打包模式
??},
??//?第二套配置:?微信轉(zhuǎn)支付寶
??{
????name:?'ali',
????sourceType:?'wechat',?//?源碼類型:?微信?DSL
????target:?'alipay',?//?編譯目標(biāo):?支付寶
????compileMode:?'bundle',?//?編譯模式:?打包模式
??},
??//?第三套配置:?微信轉(zhuǎn)?Web
??{
????name:?'web',
????sourceType:?'wechat',?//?源碼類型:?微信?DSL
????target:?'web',?//?編譯目標(biāo):?Web
????compileMode:?'bundle',?//?編譯模式:?打包模式
??}
])

在_ package.json_ 中配置腳本：

{
??"scripts":?{
+???"dev":?"mor?compile?-w",
+???"build":?"mor?compile?--production"
??}
}

在項(xiàng)目目錄終端下執(zhí)行編譯命令啟動(dòng)項(xiàng)目：

$?npm?run?dev

多端產(chǎn)物已構(gòu)建在_ dist _目錄下，分別用對(duì)應(yīng)平臺(tái)的 IDE 打開即可開發(fā)預(yù)覽。

MorJS 核心能力

多端編譯：提供一碼多端轉(zhuǎn)換能力

從誕生之初，MorJS 的一個(gè)核心能力就是實(shí)現(xiàn)小程序一碼多端的轉(zhuǎn)換，讓一套代碼經(jīng)過編譯后對(duì)應(yīng)的各端產(chǎn)物，分別在多個(gè)小程序平臺(tái)上運(yùn)行，讓開發(fā)成本，招聘、管理、測(cè)試各方面成本都大幅下降。截止到目前，我們已經(jīng)支持多數(shù)小程序平臺(tái)的轉(zhuǎn)換。

集成研發(fā)：提供復(fù)雜小程序解耦開發(fā)能力

隨著業(yè)務(wù)需求的不斷增加，很多小程序項(xiàng)目不可避免的會(huì)出現(xiàn)體積巨大化的問題。雖然小程序官方提供了小程序分包、小程序插件的解決方案，但基于同一個(gè)小程序代碼庫，眾多分包、插件的迭代情況復(fù)雜，實(shí)際業(yè)務(wù)難以解耦。如果你的項(xiàng)目遇到類似的問題，可以使用 MorJS 提供的集成研發(fā)能力，把各個(gè)分包、插件、模塊分成一個(gè)個(gè)獨(dú)立的項(xiàng)目，并通過集成研發(fā)將小程序宿主和這些子模塊通過拉包、編譯、構(gòu)建、合并等一系列處理，合并為一個(gè)完整小程序進(jìn)行開發(fā)、調(diào)試和部署。

形態(tài)互轉(zhuǎn)：提供小程序多形態(tài)轉(zhuǎn)換能力

（如果你的項(xiàng)目沒有類似訴求可以跳過本段內(nèi)容）隨著投放場(chǎng)景的增加，不同業(yè)務(wù)在不同小程序端的形態(tài)可能并不相同。例如一個(gè)在支付寶端的小程序應(yīng)用，在某些場(chǎng)景下希望他以分包的形式接入到微信小程序中。于是讓項(xiàng)目在獨(dú)立小程序、小程序插件、小程序分包應(yīng)用形態(tài)間互相轉(zhuǎn)換成為一個(gè)難題。

MorJS 提供的形態(tài)一體化能力，可以在盡量減少業(yè)務(wù)代碼修改的前提下，提供同一個(gè)項(xiàng)目在以不同端（微信、支付寶、淘寶、抖音等）不同形態(tài)（小程序、小程序插件、小程序分包）間的轉(zhuǎn)換能力。

H5 同構(gòu)：提供小程序 DSL 轉(zhuǎn) H5 能力

除了多端多形態(tài)的小程序外，不少開發(fā)者還面臨著 H5 場(chǎng)景的投放。對(duì)此， MorJS 提供將小程序項(xiàng)目轉(zhuǎn)換為 Web 項(xiàng)目的能力。這一能力的核心是將小程序轉(zhuǎn)換成一個(gè)基于 **React **的項(xiàng)目產(chǎn)物。無論是整個(gè)工程項(xiàng)目的轉(zhuǎn)碼、或是單個(gè)組件的編譯，MorJS 都能夠支持。

其他

除此上述核心能力外，MorJS 圍繞小程序?qū)崿F(xiàn)了一系列研發(fā)生態(tài)能力的建設(shè)，包括但不限于以下：

條件編譯：提供對(duì)于多端或不同環(huán)境構(gòu)建產(chǎn)出不同代碼的能力，更加靈活的解決不同場(chǎng)景的適配問題；

產(chǎn)物壓縮：提供了不同類型文件的最小化兼容壓縮方式，并保留配置選項(xiàng)對(duì)高級(jí)壓縮方案的擴(kuò)展支持；

Mock 能力：提供小程序本地 JSAPI mock 能力，解決開發(fā)階段無法聯(lián)調(diào)接口請(qǐng)求數(shù)據(jù)的痛點(diǎn)；

優(yōu)勢(shì)與現(xiàn)狀

MorJS 的優(yōu)勢(shì)

如你所見，MorJS 是一套基于小程序 DSL (支付寶或微信) 的框架。他的易用性、標(biāo)準(zhǔn)化和靈活性，使得開發(fā)者能更好地專注于業(yè)務(wù)，降低研發(fā)、調(diào)試成本，提高開發(fā)者的工作效率。

使用現(xiàn)狀

截止目前，MorJS 支持 4 種編譯形態(tài)（小程序、小程序插件、小程序分包、H5），支撐了餓了么 C 端大多數(shù)業(yè)務(wù)在各個(gè)渠道上的研發(fā)和投放。通過 MorJS 的開源，我們期望能把其中的技術(shù)細(xì)節(jié)、架構(gòu)設(shè)計(jì)和技術(shù)思考呈現(xiàn)給大家，為有類似多端同構(gòu)需求的企業(yè)和開發(fā)者服務(wù)。

結(jié)語

MorJS 為餓了么解決了大量業(yè)務(wù)在多端研發(fā)上的差異問題，讓小程序開發(fā)的重心回到產(chǎn)品業(yè)務(wù)本身，減少使用者對(duì)多端差異兼容的投入，在通過開源讓大家更好地了解和使用這項(xiàng)技術(shù)的同時(shí)，我們也希望能夠借此吸引到更多志趣相投的小伙伴參與共建，一起加速小程序一碼多端能力的發(fā)展。歡迎廣大小程序開發(fā)者們與我們交流。

編輯：黃飛

?