Separate Berechnungsfunktionen, die von der Vue-Kompilierung in separate Pakete gemeinsam genutzt werden

Question

Wie kann man gemeinsamen vue/nuxtspezifischen Code zwischen verschiedenen Paketen teilen?

Ich möchte monorepo nicht verwenden, aber ich habe gemeinsam genutzten Code, den ich in ein eigenes Paket aufteilen möchte. Dieser gemeinsam genutzte Code (neues Paket) wird mit @nuxtjs/composition-api geschrieben, nur der gemeinsam genutzte berechnete wird in verschiedenen Komponenten immer wieder verwendet /templates ;Methoden.

Ich möchte nicht, dass dieses Paket als Plugin eingerichtet wird. Importieren Sie stattdessen direkt, um das Tree-Shaking zu nutzen (genau wie bei composition-api).

Ich bin mit der Verwendung von rollupjs vertraut, um importierbare Module zu erstellen.

//Neues Paket
//index.js
Exportieren Sie {Standard als isTrue} aus './src/isTrue'
...

//src/isTrue
import { berechnet } aus '@nuxtjs/composition-api'

Exportstandard (p) =>
  return berechnet(() => p === 'true') //Ich bin mir nicht sicher, ob dies die Reaktionsfähigkeit zerstören wird? ! ? !
}

Ich hatte keine Probleme beim Kompilieren in die Formate .ssr, .esm, .min über rollupjs

Das Problem tritt auf, wenn ich ein neues Paket in eine Arbeitsdatei importiere.

import { isTrue } from 'new-package'

Standard exportieren{
Name: 'testComp',
setup(props){
  zurückkehren {
    isActive: isTrue(props.active)
  }
}

erzeugt:

[vue-composition-api] Vue.use(VueCompositionAPI) muss vor der Verwendung von Funktionen aufgerufen werden. 

Ich verstehe, dass @nuxtjs/composition-api ein Wrapper für VueCompositionAPI ist.

Ich möchte das neue Paket nicht als Plugin installieren, daher lasse ich die Installation des neuen Pakets aus (Installationsbeispiel: https://github.com/wuruoyun/vue-component-lib-starter/blob /master/src/install .js)

Answer 1

使用了 options API

//library.js
export default function(){ // 访问 this -> 箭头函数没有 this
   return this.disabled == true // 当使用 options api 时，这将是 vue 上下文，即属性 disabled
}

使用 rollupjs 编译 library.js，并可以导入

//component.vue
import { isDisabled } from 'library'

export default {
  //Composition API:
  setup(props){
   return {
    //stuff
   }
  },
  //Options API:
  computed:{
    isDisabled,
  }
}