Vue组件库 - 无法从dist导入

Question

我已经尝试了几天来设置Vue组件库。我查看了几个教程并阅读了一些受欢迎的现有UI库的代码。我的问题归结为：

我的库名为@company/vue-components

我使用npm将我的库安装到项目中：

npm install @company/vue-components

然后我尝试将我的库注册为Vue插件：

import Vue from 'vue';
import VueComponents from '@company/vue-components';

Vue.use(VueComponents);

我尝试在由vue-cli生成的About.vue页面中使用我的组件（名为EButton）：

<template>
    <div class="about">
        <h1>This is an about page</h1>
        <e-button color="primary">Click this button</e-button>
    </div>
</template>

<script>
export default {
};
</script>

但我收到了一个错误：

[Vue warn]: Unknown custom element: <e-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option

如果我回到注册插件的地方，只需要做一个修改就可以让它正常工作：

import VueComponents from '@company/vue-components/src/index';

所以，我猜我没有正确地构建我的分发包，因为当我简单使用 "@company/vue-components" 时，它引用的就是它。如果我在控制台中打印每个变量，我可以看到分发包的导入不包括 "install" 函数，但源代码导入包括：

这是我能想到的所有相关源代码。这是使用vue-sfc-rollup cli工具和复制Buefy库设置的混合体。

EButton.vue

<template>
    <button class="button" v-bind="$attrs" v-on="$listeners">
        <slot></slot>
    </button>
</template>

<script>
export default {
    name: 'EButton',
    inheritAttrs: false
};
</script>

EButton/index.js

import EButton from './EButton.vue';

const Plugin = {
    install(Vue) {
        Vue.component(EButton.name, EButton);
    }
};

let GlobalVue = null;

if (typeof window !== 'undefined') {
    GlobalVue = window.Vue;
}
else if (typeof global !== 'undefined') {
    GlobalVue = global.Vue;
}

if (GlobalVue) {
    GlobalVue.use(Plugin);
}

export default Plugin;

export {
    EButton
};

components/index.js

import EButton from './EButton';

export {
    EButton
};

src/index.js

import * as components from './components/index.js';

const install = function(Vue) {
    if (install.installed) {
        return;
    }
    install.installed = true;

    for (let name in components) {
        Vue.use(components[name]);
    }
};

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);
}

export default Plugin;

rollup.config.js

import vue from 'rollup-plugin-vue';
import buble from 'rollup-plugin-buble';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';
import { terser } from 'rollup-plugin-terser';
import minimist from 'minimist';

const argv = minimist(process.argv.slice(2));

const baseConfig = {
    input: 'src/index.js',
    plugins: {
        preVue: [
            replace({
                'process.env.NODE_ENV': JSON.stringify('production')
            }),
            commonjs()
        ],
        vue: {
            css: true,
            template: {
                isProduction: true
            }
        },
        postVue: [
            buble()
        ]
    }
};

const external = [
];

const globals = {
};

const buildFormats = [];

if (!argv.format || argv.format === 'es') {
    const esConfig = {
        ...baseConfig,
        external,
        output: {
            file: 'dist/vue-components.esm.js',
            format: 'esm',
            exports: 'named',
            globals
        },
        plugins: [
            ...baseConfig.plugins.preVue,
            vue(baseConfig.plugins.vue),
            ...baseConfig.plugins.postVue,
            terser({
                output: {
                    ecma: 6
                }
            })
        ]
    };

    buildFormats.push(esConfig);
}

if (!argv.format || argv.format === 'cjs') {
    const umdConfig = {
        ...baseConfig,
        external,
        output: {
            compact: true,
            file: 'dist/vue-components.ssr.js',
            format: 'cjs',
            name: 'VueComponents',
            exports: 'named',
            globals,
        },
        plugins: [
            ...baseConfig.plugins.preVue,
            vue({
                ...baseConfig.plugins.vue,
                template: {
                    ...baseConfig.plugins.vue.template,
                    optimizeSSR: true
                }
            }),
            ...baseConfig.plugins.postVue
        ]
    };

    buildFormats.push(umdConfig);
}

if (!argv.format || argv.format === 'iife') {
    const unpkgConfig = {
        ...baseConfig,
        external,
        output: {
            compact: true,
            file: 'dist/vue-components.min.js',
            format: 'iife',
            name: 'VueComponents',
            exports: 'named',
            globals,
        },
        plugins: [
            ...baseConfig.plugins.preVue,
            vue(baseConfig.plugins.vue),
            ...baseConfig.plugins.postVue,
            terser({
                output: {
                    ecma: 5
                }
            })
        ]
    };

    buildFormats.push(unpkgConfig);
}

export default buildFormats;

package.json

{
  "name": "@company/vue-components",
  "version": "1.0.0",
  "description": "",

  "main": "dist/vue-components.ssr.js",
  "module": "dist/vue-components.esm.js",
  "unpkg": "dist/vue-components.min.js",

  "files": [
    "dist/*",
    "src/**/*.vue",
    "!src/lib-dev.vue"
  ],

  "scripts": {
    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
  },
  ...
}

- Troncoso

---

你的组件库 package.json 中的 main 入口是什么？例如，这里是 Vuex 组件库的链接 ~ https://github.com/vuejs/vuex/blob/dev/package.json#L5 - Phil

抱歉，我已添加了package.json信息。 - Troncoso

Answer 1

尝试解决了几周后，我最终使用Vue CLI工具重新启动了该项目。使用vue-cli-service build命令按照我所需构建了库。完整命令：

vue-cli-service build --no-clean --target lib --name vue-components src/index.js

src/index.js文件与我在上面的帖子中提到的相同

- Troncoso