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