Использование не-SSR Vue модуля от Vuepress - как деактивировать импорт? - PullRequest
Новая
       19

Использование не-SSR Vue модуля от Vuepress - как деактивировать импорт?

1 голос
/ 13 марта 2019

Из-за рендеринга на стороне сервера vuepress не может использовать vue компоненты, которые импортируют библиотеки с использованием DOM.

, т.е. это не работает, потому что mapbox-gl требуется доступ к DOMпри импорте: 

import mapboxgl from 'mapbox-gl'

Предлагаемое решение заключается в использовании динамического импорта в хуке created(), например 

created () {
  import('mapbox-gl').then(MapboxModule => {
    window.mapboxgl = MapboxModule.default
  }
}

Однако я не смог получитьДинамический импорт работает правильно с объединением модулей. [EDIT] (После фальстарта метод динамического импорта работает.)

Другая стратегия может заключаться в загрузке сценария mapbox-gl с использованием vuepressconfig.js головной раздел.Например, в моем файле docs/.vuepress/config.js у меня есть: 

head: [
    ['link', {
      rel: 'stylesheet',
      type: 'text/css',
      href: 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css'
    }],
    ['script', {
      src: 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'
    }]
  ],

Помимо оператора import, весь компонент может затем использоваться как обычно, поскольку доступна переменная mapboxglв пространстве имен window.

Отсюда мой вопрос: существует ли простой и элегантный способ деактивировать оператор import специально для использования с vuepress?

Мое текущее решение включает создание базового компонента без импорта (для использования из vuepress), а затем расширяя его в другом компоненте, который затем явно импортирует и регистрирует глобальные переменные, например, 

<script>
import mapboxgl from 'mapbox-gl'
window.mapboxgl = mapboxgl
// eslint-disable-next-line
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
window.MapboxGeocoder = MapboxGeocoder
// eslint-disable-next-line
import MyComponentBase from './MyComponentBase.vue'

export default {
  name: 'MyComponent',
  extends: MyComponentBase
}
</script>
...