我的npm打包vue组件导出有什么问题？

Question

我有一个小的本地 npm 包 ( fomantic-ui-vue)，其主要js是

import Vue from 'vue'

// Import vue component

import  button from './elements/button/button.vue'

import  buttonGroup from './elements/button/button-group.vue'

console.log('--------- package called begin ------------------');

console.log('Register: '+button.name)

Vue.component(button.name, button);

console.log('Register: '+buttonGroup.name)

Vue.component(buttonGroup.name, buttonGroup);

console.log('--------- package called end ------------------');

export const components = {

        button,

        buttonGroup,

    };

export const test = () => {

    console.log('--------- TEST ------------------');

};

在我的测试应用程序中，我有

import FUI from '../../fomantic-ui-vue/dist/main.js'

console.log(FUI)

FUI.test()

1. 第一行必须以某种方式正确，因为在我看到的浏览器外壳中package called begin等等。

2. console.log(FUI)给{}. 测试和组件在哪里？

3. 因为FUI.test()我收到错误来自TypeError: _fomantic_ui_vue_dist_main_js__WEBPACK_IMPORTED_MODULE_2___default.a.test is not a function哪里a？怎么了？

4. 如果我注释掉FUI.test()以避免错误，我会得到 vue 组件fue-button未注册的错误，因此我得出结论，npm 包在其他地方注册了它

这些错误很多，但我认为它们都是相关的。

Answer 1

解决办法是在webpack.config.js中添加library和libraryTarget：module.exports = {  entry: './src/index.js',  output: {    library: 'fomantic-ui-vue',    libraryTarget: 'umd',    filename: 'main.js',    path: path.resolve(__dirname, 'dist'),  },

Answer 2

您正在使用名称导出，因此为了使用该test功能，您应该将其导入：import {test} from '../../fomantic-ui-vue/dist/main.js';如果你想用点符号使用它，你main.js的导出应该是一个对象，每个键引用函数：...const myTestFunc = () => 'test';const aComponent = () => Vue.component(..);export default {   test: myTestFunc,   component: aComponent}希望能帮助到你