codecamp

MorJS 复杂情况下的多端规范示例

以一个需要适配 微信小程序、支付宝小程序,mor bundle 模式的小程序的 JS 库举例:

业务项目中可以通过 import { xx } from 'example' 引用依赖,且要求能够支持 import { oo } from 'example/lib/zz' 的情况下也能够加载依赖,可以参考以下的配置示例。

一般情况下,并不建议大家这样做,所有需要能够加载的模块最好都直接从依赖根模块导出。避免直接去某个特定目录下加载。

目录结构

这里以最简单的目录形式展示:

- src
  - index.ts(源代码)
- lib
  - index.js(输出的 ES5 版本代码)
  - index.d.ts(输出的类型申明)

支付宝小程序适配

package.json 中,我们指定 main 字段,指向生成后的 lib 目录,这样支付宝小程序会采用 lib/index.js 这份代码。

由于支付宝小程序支持 node_modules 中使用 ESNext 规范的模块,可以方便做 tree shaking,因此在多端版本输出的情况下,支付宝小程序版本建议输出的 module 规范是 ESNext 模块规范

package.json 配置示例:
{
  "main": "lib" // 支付宝小程序
}

微信原生小程序适配

由于在微信原生小程序中,针对 NPM包 是采用 miniprogram 字段来指定目录,且实际是通过拷贝目录来 构建NPM,因此适配微信原生小程序的话,需要套多一层目录。

建议输出的 module 规范是 CommonJS 模块规范

- src
  - index.ts(源代码)
- lib
  - index.js(输出的 ES5 版本代码)
  - index.d.ts(输出的类型申明)
- miniprogram_dist
  - lib
    - index.js(针对微信版本输出的 ES5 版本代码)
    - index.d.ts(输出的类型申明)

然后在 package.json 中需要通过 miniprogram 字段来指向目录,微信小程序下会采用 miniprogram/lib/index.js这份代码。

package.json 配置示例:
{
  "main": "lib", // 支付宝小程序
  "miniprogram": "miniprogram_dist" // 微信原生小程序
}

mor bundle 模式适配

由于 MorJS 是自己做依赖解析的,如果库在支持了微信原生小程序的依赖解析方式上,MorJS 通过 miniprogram 字段去做解析的话,会因为路径解析问题直接导致报错。 构建并不需要专门为 MorJS 生成一份代码,MorJS 依然会采用miniprogram_dist下的代码,只需要在package.json中增加wechat字段的配置即可

package.json配置示例:
{
  "main": "lib", // 支付宝小程序
  "miniprogram": "miniprogram_dist", // 微信原生小程序
  "wechat": "miniprogram_dist/lib" // mor bundle 模式
}


MorJS 正常情况下的多端规范示例
MorJS 多端组件库规范概要
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

MorJS 指南

MorJS 基础用法

MorJS 配置

MorJS 编译相关配置

MorJS 进阶用法

MorJS Web开发

MorJS Web开发介绍

MorJS Web开发快速上手

MorJS Tabbar IOS 小黑条适配开关

MorJS 社区

MorJS 规范

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }