导出我的 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 functiona从何而来？ 怎么了？
4. 如果我FUI.test()注释以避免错误，我会收到 vue 组件fue-button未注册的错误，因此我得出结论，npm 包在其他地方注册了它

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

编辑

const myTest = () => {
console.log('--------- TEST ------------------');
};
export default {
test: myTest,
components: {
button,
buttonGroup
}
};

Answer 1

您正在使用名称导出，因此为了使用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
}

希望对你有帮助

Answer 2

解决方案是在 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'),
},