Question

这个问题来自我所遇到的Kirby CMS issue。这是一个简短的摘要。

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

vendors.js块
插件的JavaScript包（例如，myplugin.js）
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中是否有功能允许依赖项暴露给外部代码？

如何在`window`中公开webpack依赖？

0 个答案: