3

这个问题来自我遇到的Kirby CMS 问题。这是一个简短的总结。

Kirby 面板使用 Vue 和 Vuex 并将它们与 Webpack 捆绑在一起（通过 Vue CLI）。它有两个块，供应商和应用程序。人们还可以为该面板编写插件。JS执行顺序如下：

  1. vendor.js 块
  2. 插件的 JavaScript 包（例如，myplugin.js）
  3. app.js 块

问题是 - myplugin.js 如何引用与 app.js 相同的 Vuex？正如我在问题中所描述的，如果我在 myplugin.js 中使用自己的 Vue 和 Vuex，Vue 会出现问题。由于 Kirby 在它自己的 Vue 实例中加载我的 Vue 组件，该组件的存储应该使用绑定到同一个 Vue 实例的 Vuex 存储，否则 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。

显然，这些依赖项应该在 vendor.js 块中公开。有没有可能发生的方法？插件可能需要使用除 Vue 和 Vuex 之外的其他面板依赖项。如果它们已经存在，将它们包括在内将是多余的。此外，插件和面板可能需要共享相同的依赖项状态，在这种情况下，使用相同的依赖项是必需的（就像我在 Vuex 中的情况一样）。

面板有没有办法将其依赖项暴露给window对象？它已经创建window.panel了包含对插件有用的数据。它可以以某种方式添加window.panel.vendors在那里吗？或者也许只是window.vendors？从那里您可以new vendors.Vuex.Store(...)在插件中使用。

Webpack 中是否有允许将依赖项暴露给外部代码的功能？

4

0 回答 0