在一个自定义 npm 包中导出 Vue 和 Vuex

Question

我正在尝试将一个 Vue/Vuex 项目分解为一个私人托管的 npm 包。我想我快到了，但是我不确定我当前的布局，到目前为止我有：

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

我的目标是使 BrokerProposal 目录可导入，这是通过第一个 index.js 文件完成的：

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;

这个项目也使用 vuex，所以我已经将状态的修改器等分解到这个包中以与 BrokerProposal 一起使用，最终用户可以在导入后绑定这个商店，这里是 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

我觉得我应该在与 /src 相同的级别中包括另一个 index.js 文件，因为 package.json 文件中有一个部分 'main' 必须指向某物？

Answer 1

应避免像 Vue.use(Vuex) 和 GlobalVue.use(plugin) 这样的副作用，因为它们可能会干扰使用此包的项目。使用适当的 Vue 实例设置插件是项目的责任。

所有 public 导出都可以在入口点命名为导出，例如src/index.js:

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

导出组件也是一个好习惯，以防它们需要在本地导入而不是依赖于 Vue.component 的全局注册。

在一个自定义 npm 包中导出 Vue 和 Vuex

Exporting Vue and Vuex in one custom npm package

npm

vue.js

vuex