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

Question

我有一个小的本地 npm 包 ( fomantic-ui-vue)，其主要js是import Vue from 'vue'// Import vue componentimport  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()第一行必须以某种方式正确，因为在我看到的浏览器外壳中package called begin等等。console.log(FUI)给{}. 测试和组件在哪里？因为FUI.test()我收到错误来自TypeError: _fomantic_ui_vue_dist_main_js__WEBPACK_IMPORTED_MODULE_2___default.a.test is not a function哪里a？怎么了？如果我注释掉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

}

希望能帮助到你