バックグラウンド
通常、小さなプログラムのプラグインを使用する場合は、プラグインをサブパッケージに入れることを好みます。これは、プラグインのボリュームがメイン パッケージにパッケージ化されるため、メイン パッケージのボリュームが容易に 2M を超えて公開できなくなるためです。プラグインを含むこのサブパッケージをサブコントラクト P と呼びましょう。現時点で、他の 2 つのビジネス下請け XY は、このサブコントラクト P にプラグインを導入したいと考えています (プラグインにはいくつかのコンポーネントといくつかのインターフェイス関数が含まれています)。
解決策 1: サブパッケージ自体でプラグインを導入できるため、サブパッケージ XY にプラグインを直接インポートしたいのですが、プロジェクト内で同じプラグインを複数回参照できないため、この解決策は機能しません。
解決策 2: プラグインをメイン パッケージに配置します。これは実現できますが、プラグインのサイズはメイン パッケージにパッケージ化されるため、簡単に 2M を超えます。パッケージ XY はサブパッケージ化の非同期によって導入されます
。
パケットの非同期
公式サイト
での簡単な紹介 . 通常、メインパッケージからサブパッケージへ、またはサブパッケージからサブパッケージへジャンプします. ページにジャンプし、ジャンプするときにサブパッケージをロードするだけです。コンポーネントまたはインターフェイスをサブパッケージ化すると、別のサブパッケージがいつそれをロードするかわからないため、現時点では通常は使用できません。パケットの非同期は、この問題を解決します。
サブパッケージ間のカスタム コンポーネントのリファレンス
ディレクトリ構造には、2 つのサブパッケージ 1 と 2 があります。サブパッケージ 1 にはカスタム コンポーネントがあります。この時点で、サブパッケージ 2 はサブパッケージ 1 のコンポーネントをインポートしようとしています。コードは次のとおりです。
"subpackages": [
{
"root": "pagesPlugin1",
'pages': [
'page-index/index'
],
"plugins": {
"assist-photo": {
"version": "3.2.1",
"provider": "wxcf13b931313209a4"
}
}
},
{
"root": "pagesPlugin2",
'pages': [
'page-index/index'
]
}
]
サブパッケージ 2 のコードは次のとおりです。
<style lang="less">
</style>
<template>
<div>这是pagesPlugin2</div>
<chose-part></chose-part>
</template>
<script>
import wepy from '@wepy/core'
wepy.page({
data: {
},
onShow() {
}
})
</script>
<config>
{
"usingComponents": {
"chose-part": "../../pagesPlugin1/components/chose-part/index",
},
"componentPlaceholder": {
"chose-part": "view"
}
}
</config>
現時点では、サブパッケージ 2 ページを開くとこのコンポーネントが表示されます。
クロスパッケージ JS コードリファレンス
サブパッケージ 2 は、サブパッケージ 1 のインターフェイスを呼び出したいと考えています。ここで、サブパッケージ 1 は最初にいくつかの関数、
pagesPlugin1/utils/index.jsをエクスポートします。
export const sayHello = () => {
console.log('hello')
}
サブパッケージ 2 で
photosPlugin2/page-index/indexを呼び出します。
import wepy from '@wepy/core'
wepy.page({
data: {
},
methods: {
getPagesPlugin1 () {
require.async('../../pagesPlugin1/utils/index.js').then(pkg => {
console.log('utils', pkg)
pkg.sayHello()
}).catch(({
mod, errMsg}) => {
console.error(`path: ${
mod}, ${
errMsg}`)
})
}
},
onShow() {
this.getPagesPlugin1()
}
})
注: wepy のようなフレームワークを使用する場合は、これらのインターフェイス関数をサブパッケージ ページに導入する必要があります。そうしないと、これらの依存関係が認識できないため、最終的なパッケージ化ではこのインターフェイス関数がパッケージ化されません。
すべてのコードはテストされており、有効です~
