Vue и Rollup: как собрать набор компонентов? - PullRequest
Новая
       20

Vue и Rollup: как собрать набор компонентов?

0 голосов
/ 31 августа 2018

Я хочу связать пару компонентов, которые я написал в Vue . Сделать поэтому я использую Rollup с файлом index.js (файл, который я называю Rollup on), который выглядит следующим образом: 

import ComponentA from './components/ComponentA'
import ComponentB from './components/ComponentB'

var myMod = {
  ComponentA: ComponentA,
  ComponentB: ComponentB
}

window.myMod = myMod

, который затем включается в main.js.

Теперь я могу включить свой модуль в HTML-страницу с обычным тегом <script src="main.js">.

Теперь я могу определять компоненты, которые используют компоненты моих модулей, например, 

ComponentA = myMod.ComponentA
app = new Vue({
  el: '#app',
  components: { ComponentA },
  // components: myMod, also works if I want to use all the components
  template: ` ...<ComponentA/>...`
})

и до недавнего времени это было хорошо для меня.

Мне было интересно, что теперь я могу использовать свой модуль компонентов в одном компоненте vue файла вне моего модуля (например, если я хочу создать сайт с vue-cli-3).

, например 

<template>...</template>
<script>
import myMod from 'main.js'
ComponentA = myMod.ComponentA
export default {
  name: 'SFCInAnotherApp',
  components: { ComponentA },
}
</script>
<style>...</style>

Я попытался изменить файл index.js на: 

export default myMod

вместо window.myMod

однако теперь, когда я импортирую свой компонент, модуль не определен ..

* * Например, одна тысяча тридцать восемь 
<template>...</template>
<script>
import myMod from 'main.js'
console.log(myMod)
ComponentA = myMod.ComponentA
export default {
  name: 'SFCInAnotherApp',
  components: { ComponentA },
}
</script>
<style>...</style>

----> undefined

Если я сохраню строку window.myMod = myMod, то после рендеринга страницы (с ошибками в приложениях, пытающихся использовать компоненты myMod), я, конечно, смогу получить доступ к myMod без проблем.

Как использовать rollup , чтобы создать коллекцию компонентов, которые я затем смогу импортировать из других проектов vue: 

import {componentA} from '<path-to-myMod>'

или 

import myMod from '<file-with-my-mod>'
var ComponentA = myMod.ComponentA

Короче говоря:

Используя Rollup , как мне в моем файле index.js импортировать мои Vue компоненты и экспортировать мой модуль, чтобы я мог использовать его, как в настоящее время, а также импортировать его на отдельные файловые компоненты?

...