Vue コンパイルで共有される計算関数を別のパッケージに分ける

Question

共通の vue/nuxt 固有のコードを異なるパッケージ間で共有するにはどうすればよいですか?

monorepo を使用したくありませんが、独自のパッケージに分離したい共有コードがいくつかあります。この共有コード (新しいパッケージ) は、@nuxtjs/composition-api を使用して記述されており、共有の 計算された と、さまざまな環境で何度も使用される にすぎません。コンポーネント/テンプレート ;メソッド。

このパッケージをプラグインとして設定したくないです。代わりに、直接インポートしてツリー シェーキングを利用します (composition-api と同様)。

rollupjs を使用してインポート可能なモジュールを作成することに慣れています。

//新しいパッケージ
//インデックス.js
'./src/isTrue' から { デフォルトとして isTrue } をエクスポートします
...

//src/isTrue
import { computed } from '@nuxtjs/composition-api'

デフォルトをエクスポート (p) => {
  return computed(() => p === 'true') //これにより応答性が損なわれるかどうかはわかりません。 ！ ? ！
}

rollupjs

経由で .ssr、.esm、.min 形式にコンパイルするのに問題はありませんでした。

新しいパッケージを作業ファイルにインポートすると、問題が発生します。

import { isTrue } from 'new-package'

デフォルトをエクスポート{
名前: 'testComp'、
セットアップ(小道具){
  戻る {
    isActive: isTrue(props.active)
  }
}

は次のものを生成します:

[vue-composition-api] 関数を使用する前に Vue.use(VueCompositionAPI) を呼び出す必要があります。 

@nuxtjs/composition-api が VueCompositionAPI のラッパーであることを理解しています。

新しいパッケージをプラグインとしてインストールしたくないので、新しいパッケージのインストールを省略します（インストール例：https://github.com/wuruoyun/vue-component-lib-starter/blob） /master/src/install .js)

Answer 1

使用した オプション API

リーリー

rollupjs を使用して library.js をコンパイルし、インポートします リーリー