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()

第一行必须在某种程度上正确，因为在浏览器外壳中，我看到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软件包已在其他位置将其注册了

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

编辑

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'),
  },

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

2 个答案: