Невозможно использовать библиотеку компонентов Vue со ссылкой npm

Я создаю приложение Vue и библиотеку компонентов Vue одновременно. Итак, я хотел бы настроить библиотеку с помощью ссылки npm, чтобы мне не приходилось публиковать свой пакет библиотеки и переустанавливать его в моем основном приложении.

Мой пакет будет называться @company/vue. Я могу опубликовать его в npm и установить / использовать в своем приложении Vue следующим образом:

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

Vue.use(VueComponents);

И это прекрасно работает. Я могу получить доступ к компонентам в моих файлах .vue и тому подобное.

Однако, если я буду следовать стандартным инструкциям по связыванию моей библиотеки:

  1. cd путь / к / библиотеке
  2. ссылка npm
  3. cd путь / к / приложению
  4. npm ссылка @ компания / vue

При запуске режима разработчика я получаю это предупреждение:

export 'default' (imported as 'VueComponents') was not found in '@company/vue'

И, конечно же, на странице ничего не загружается.

Я должен представить, что, возможно, я неправильно его связываю?

Мой сценарий сборки выглядит так:

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

И мой index.js, на который он ссылается:

import './index.scss';

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

const CompanyVue = {
    install(Vue) {
        if (this.installed) {
            return;
        }

        this.installed = true;
        for (let name in components) {
            Vue.use(components[name]);
        }
    }
};

let GlobalVue = null;

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

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

export * from './components';
export default CompanyVue;

Это стандартный способ, который я видел в большинстве библиотек. И снова он отлично работает, если я вытащу пакет из npm.

Это то, что связано с моей связкой в ​​моем package.json:

"files": [
  "dist",
  "src",
  "!src/**/*.spec.js",
  "!src/**/*.stories.js"
],
"main": "./dist/company-vue.common.min.js",
"module": "./dist/company-vue.umd.min.js",
"browser": "./dist/company-vue.umd.min.js",
"unpkg": "./dist/company-vue.umd.min.js"

И, наконец, моя конфигурация babel для библиотеки компонентов:

module.exports = {
    presets: ['@babel/preset-env'],
    env: {
        test: {
            presets: [[
                '@babel/preset-env',
                {
                    targets: { node: "current" }
                }
            ]]
        }
    }
}

person Troncoso    schedule 05.07.2019    source источник
comment
есть ли прогресс в этом вопросе?   -  person Jared    schedule 05.09.2019


Ответы (1)


Я нашел решение в этой проблеме:

просто добавьте это в свой vue.config.js в своем проекте:

 configureWebpack: {
    resolve: {
        symlinks:false //npm link
    },
}
person Manuel Ottlik    schedule 30.09.2019