在一个自定义 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 实例设置插件。

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

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

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