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 模式
}