Я создаю приложение Vue и библиотеку компонентов Vue одновременно. Итак, я хотел бы настроить библиотеку с помощью ссылки npm, чтобы мне не приходилось публиковать свой пакет библиотеки и переустанавливать его в моем основном приложении.
Мой пакет будет называться @company/vue
. Я могу опубликовать его в npm и установить / использовать в своем приложении Vue следующим образом:
import Vue from 'vue';
import VueComponents from '@company/vue';
Vue.use(VueComponents);
И это прекрасно работает. Я могу получить доступ к компонентам в моих файлах .vue и тому подобное.
Однако, если я буду следовать стандартным инструкциям по связыванию моей библиотеки:
- cd путь / к / библиотеке
- ссылка npm
- cd путь / к / приложению
- 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" }
}
]]
}
}
}