Vue 组件库 - 无法从 dist 导入

Posted 2023-02-19

【中文标题】Vue 组件库 - 无法从 dist 导入

【英文标题】：Vue Component Library - Can't import from dist

【发布时间】：2019-11-01 16:19:56

【问题描述】：

几天来，我一直在尝试设置 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.s-s-r.js',
            format: 'cjs',
            name: 'VueComponents',
            exports: 'named',
            globals,
        ,
        plugins: [
            ...baseConfig.plugins.preVue,
            vue(
                ...baseConfig.plugins.vue,
                template: 
                    ...baseConfig.plugins.vue.template,
                    optimizes-s-r: 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.s-s-r.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:s-s-r": "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"
  ,
  ...

【问题讨论】：

您的组件库package.json 中的main 条目是什么？例如，这里是 Vuex 包~github.com/vuejs/vuex/blob/dev/package.json#L5

很抱歉。我已经添加了 package.json 信息

【参考方案1】：

在尝试处理这个问题几周后，我最终使用 Vue CLI 工具重新开始了这个项目。使用 vue-cli-service build 命令构建了我需要的库。完整的命令：

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

src/index.js 与我上面的帖子没有变化