Exportez Vue et Vuex dans un package npm personnalisé

Question

J'essaie de diviser un projet Vue/Vuex en packages npm hébergés en privé. Je pense que j'y arrive mais je ne suis pas sûr de ma disposition actuelle, pour l'instant j'ai :

src/
├── BrokerProposal
│   ├── FormInputs
│   ├── index.js
│   └── modals
└── store
    ├── index.js
    └── modules
        └── proposal
            ├── actions
            ├── getters
            ├── helpers
            ├── mutations
            └── states
                └── validations

Mon objectif est de rendre le répertoire BrokerProposal importable, ce qui se fait via le premier index.js fichier :

const BrokerProposal = require('./BrokerCalculator.vue');

function install(Vue) {
    if (install.installed) return;
    install.installed = true;
    Vue.component("v-broker-proposal", BrokerProposal);
  }
  
const plugin = {
    install
};

let GlobalVue = null;
if (typeof window !== "undefined") {
    GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
    GlobalVue = global.vue;
}
if (GlobalVue) {
    GlobalVue.use(plugin);
}

BrokerProposal.install = install;

export default BrokerProposal;

Ce projet utilise également vuex, j'ai donc réparti les mutateurs, etc. pour l'état dans ce package à utiliser avec BrokerProposal, l'utilisateur final peut lier ce stockage après l'importation, voici le fichier index.js :

import Vue from 'vue'
import Vuex from 'vuex'

// Vuex Modules
import tabs from './modules/tabs'
import proposal from './modules/proposal'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    tabs,
    proposal,
  },
})

export default store

J'ai l'impression que je devrais inclure un autre fichier index.js au même niveau que /src puisqu'il y a une section « principale » dans le fichier package.json qui doit pointer vers quelque chose ?

Answer 1

Les effets secondaires tels que Vue.use(Vuex) 和 GlobalVue.use(plugin) doivent être évités car ils peuvent interférer avec les projets utilisant ce package. Il est de la responsabilité du projet de configurer le plugin avec l'instance Vue appropriée.

Toutes les exportations publiques peuvent être nommées comme exportations au point d'entrée, par exemple src/index.js :

export { default as BrokerProposal } from './BrokerProposal';
export { default as store } from './store';

C'est également une bonne pratique d'exporter des composants au cas où vous auriez besoin de les importer localement, plutôt que de compter sur Vue.component leur enregistrement à l'échelle mondiale.