This question comes from a Kirby CMS issue I am having. Here's a brief summary.
The Kirby panel uses Vue and Vuex and bundles them with Webpack (through Vue CLI). It has two chunks, vendors and app. People could also write plugins for that panel. The JS execution order is as follows:
- vendors.js chunk
- Plugins' JavaScript bundles (for instance, myplugin.js)
- app.js chunk
The question is - how can myplugin.js reference the same Vuex as app.js? As I've described in my issue, there are problems with Vue if I use my own Vue and Vuex in myplugin.js. Since Kirby loads my Vue component in its own Vue instance, that component's store should use a Vuex Store bound to the same Vue instance, otherwise Vue's reactivity breaks.
We can't add the following in app.js:
import Vue from 'vue'
import Vuex from 'vuex'
window.KirbyVue = Vue
window.KirbyVuex = Vuex
because the app.js chunk is executed after myplugin.js. Therefore when imports in myplugin.js are resolved, references to KirbyVuex would not exist yet. So you couldn't do:
new KirbyVuex.Store({
...
})
because KirbyVuex would be undefined.
So apparently, those dependencies should be exposed in the vendors.js chunk. Is there a way that could happen? A plugin might need to use other panel dependencies aside from Vue and Vuex. It would be redundant to include them if they're already there. Also, it might be necessary for the plugin and panel to share the same dependency state, in which case using the same dependency is a requirement (as is my case here with Vuex).
Is there a way for the panel to expose its dependencies to the window object? It already creates window.panel which contains useful data for the plugins. Could it somehow add window.panel.vendors in there? Or perhaps just window.vendors? From there you'd be able to use new vendors.Vuex.Store(...) in the plugin.
Is there a functionality in Webpack that allows dependencies to be exposed to outside code?
