javascript - 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';

所以，我想我没有正确构建我的 dist 包，因为这是我简单地使用“@company/vue-components”时引用的内容。如果我在控制台中打印每个变量，我可以看到分发包的导入不包含“安装”功能，但源导入包含:



这是我能想到的所有相关的源代码。这是使用 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
};

组件/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;

包.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"
  },
  ...
}

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 与我上面的帖子没有变化