Блог

Главная - Вопросы по программированию - Как отобразить зависимости webpack в `окне`?

Как отобразить зависимости webpack в `окне`?

#javascript #webpack #kirby

#javascript #webpack #кирби

Вопрос:

Этот вопрос возникает из-за возникшей у меня проблемы с Kirby CMS. Вот краткое резюме.

Панель Kirby использует Vue и Vuex и объединяет их с Webpack (через Vue CLI). Он состоит из двух блоков: поставщиков и приложения. Люди также могли бы писать плагины для этой панели. Порядок выполнения JS следующий:

  1. vendors.js фрагмент
  2. Подключаемые пакеты JavaScript (например, myplugin.js )
  3. app.js фрагмент

Вопрос в том, как можно myplugin.js ссылайтесь на тот же Vuex, что и app.js ? Как я описал в моем выпуске, возникают проблемы с Vue, если я использую свой собственный Vue и Vuex в myplugin.js . Поскольку Kirby загружает мой компонент Vue в свой собственный экземпляр Vue, хранилище этого компонента должно использовать хранилище Vuex, привязанное к тому же экземпляру Vue, иначе реактивность Vue нарушается.

Мы не можем добавить следующее в app.js:

 import Vue from 'vue'
import Vuex from 'vuex'

window.KirbyVue = Vue
window.KirbyVuex = Vuex

поскольку app.js фрагмент выполняется после myplugin.js . Поэтому при импорте в myplugin.js разрешены, ссылки на KirbyVuex еще не существовали бы. Итак, вы не могли бы сделать:

 new KirbyVuex.Store({
  ...
})

потому что KirbyVuex было бы undefined .

Итак, очевидно, что эти зависимости должны быть выставлены в vendors.js фрагмент. Есть ли способ, которым это могло бы произойти? Плагину может потребоваться использовать другие зависимости панели, помимо Vue и Vuex. Было бы излишним включать их, если они уже есть. Кроме того, может потребоваться, чтобы плагин и панель совместно использовали одно и то же состояние зависимости, и в этом случае использование одной и той же зависимости является обязательным требованием (как в моем случае с Vuex).

Есть ли способ для панели отображать свои зависимости от window объекта? Он уже создается window.panel , который содержит полезные данные для плагинов. Может ли это как-то добавить window.panel.vendors туда? Или, может быть, просто window.vendors ? Оттуда вы сможете использовать new vendors.Vuex.Store(...) в плагине.

Есть ли в Webpack функциональность, которая позволяет отображать зависимости во внешнем коде?