使用Webpack将Vue暴露到全局

Question

我正在使用一个遗留的Rails应用程序，它部分迁移到了Webpacker和Vue。我们还有一个通过CDN加载的遗留脚本。该脚本也需要使用Vue，但我们宁愿不将Vue捆绑在其中，只使用已经存在于遗留Rails应用程序中的Vue。

我按照这个问题 How to expose Vue as global object 的指示，使用expose-loader将Vue对象暴露为Vue.default。实际上，暴露的 "Vue" 对象实际上是一个模块，并且真正的Vue对象嵌套在Vue.default中。

我通过查阅文档和文章来到这一点。以下是我找到的最相关的文章：https://bibwild.wordpress.com/2019/08/01/dealing-with-legacy-and-externally-loaded-code-in-webpacker/ 这似乎不太理想，我想知道是否有一种“更正确”的方式直接暴露Vue，即不嵌套在默认的模块中。

我尝试过创建一个全新的Rails 6应用程序。在通过以下方式添加JS依赖项之后：

yarn install
yarn add vue
yarn add -D expose-loader
yarn add -D webpack-dev-serer
rails webpacker:install

我已经将expose-loader配置添加到config/webpack/development.js中。

environment.loaders.append('expose', {
  test: require.resolve('vue'),
  use: [{
      loader: 'expose-loader',
      options: 'Vue'
  }]
})

然后我搭建了一个页面并将其设为根路由。

然后在app/javascript/packs/application.js创建了一个入口JS文件。

import Vue from 'expose-loader?Vue!vue'
console.log({ pack: Vue })

在应用程序布局中，在 javascript_pack_tag 'application' 下，我有：

<script>
  try {
    console.log({ layout: Vue })
  } catch (error) {
    console.warn('Global Vue not found')
  }
</script>

现在在浏览器控制台中，我得到以下信息。

{ pack: ƒ Vue(options) }
{ layout: Module
    default: ƒ Vue(options) }

我还尝试了在config/webpack/development.js中为expose-loader使用不同的配置，例如：

  test: require.resolve('vue/dist/vue.esm.js')
// or
  test: require.resolve('vue/dist/vue.esm.js').default
// or
  test: require.resolve('expose-loader?Vue!vue')
// and different permutations of that.

我尝试的另一种方法是通过我的application.js文件来将Vue直接塞入window对象中。虽然这样可行，但感觉不太正确。有更好的方法吗？

问题：

如何使Webpacker管理的Vue对象对于任何非Webpacker管理的脚本都可见，即在window对象上可用？

- DiegoSalazar

Answer 1

我已经通过在Webpack中使用以下配置规则来完成了这个任务。

{
  test: require.resolve("vue/dist/vue.esm.js"),
  loader: "expose-loader",
  options: {
    exposes: [{
      globalName: "Vue",
      moduleLocalName: "default",
    }]
  },
},

moduleLocalName只是从属性default中提取Vue，并使用globalName公开它，因此当您访问window.Vue时，它将存在。

- Mati

---

有趣，感谢发布！我不再参与这个项目，所以无法验证，但如果其他人可以验证并留下评论，我会考虑这个问题已经解决。 - DiegoSalazar