Этот вопрос возник из Kirby CMS У меня возникла проблема.Вот краткое резюме.
Панель Kirby использует Vue и Vuex и связывает их с Webpack (через Vue CLI).У этого есть два блока, продавцы и приложение.Люди могут также написать плагины для этой панели.Порядок выполнения JS выглядит следующим образом:
- vendors.js chunk
- Пакеты JavaScript плагинов (например, myplugin.js)
- app.js chunk
Вопрос в том, как myplugin.js может ссылаться на тот же Vuex, что и app.js?Как я описал в своей проблеме, есть проблемы с Vue, если я использую свои собственные Vue и Vuex в myplugin.js.Поскольку Кирби загружает мой компонент 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 функциональность, позволяющая открывать зависимости для внешнего кода?