MorJS 復雜情況下的多端規(guī)范示例

以一個需要適配 微信小程序、支付寶小程序，mor bundle 模式的小程序的 JS 庫舉例：

業(yè)務項目中可以通過 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 規(guī)范的模塊，可以方便做 tree shaking，因此在多端版本輸出的情況下，支付寶小程序版本建議輸出的 module 規(guī)范是 ESNext 模塊規(guī)范

package.json 配置示例：

{
  "main": "lib" // 支付寶小程序
}

微信原生小程序適配?

由于在微信原生小程序中，針對 NPM包 是采用 miniprogram 字段來指定目錄，且實際是通過拷貝目錄來 構建NPM，因此適配微信原生小程序的話，需要套多一層目錄。

建議輸出的 module 規(guī)范是 CommonJS 模塊規(guī)范

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