使用 Webpack 将 Vue 暴露给全局

Posted 2023-02-22

【中文标题】使用 Webpack 将 Vue 暴露给全局

【英文标题】：Use Webpack to expose Vue to globally

【发布时间】：2020-05-10 07:31:20

【问题描述】：

我正在使用已部分迁移以使用 Webpacker 和 Vue 的旧版 Rails 应用程序。我们还有一个通过 CDN 加载的遗留脚本。该脚本也需要使用 Vue，但我们不希望将 Vue 捆绑到其中，而只使用旧版 Rails 应用程序中已有的 Vue。

我已经关注了这个问题How to expose Vue as global object，然后我使用expose-loader 在Vue.default 公开了Vue 对象。本质上，暴露的“Vue”对象实际上是一个Module，而真正的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.

我尝试的另一种方法是将 Vue 从我的 application.js 包文件中直接推入窗口对象。这行得通，但似乎也错了。有没有更好的办法？

问题

如何公开 Webpacker 托管的 Vue 对象，以便任何非 Webpacker 托管的脚本都可以看到它？即使其在 window 对象上可用。

【参考方案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 时它就会在那里

【讨论】：

有趣，感谢发帖！我不再从事这个项目，所以我无法验证，但是，如果其他人可以验证并发表评论，我会考虑回答。