我正在使用旧版 Rails 应用程序,该应用程序已部分迁移为使用 Webpacker 和 Vue。我们还有一个通过 CDN 加载的遗留脚本。该脚本也需要使用 Vue,但是,我们不想将 Vue 捆绑到其中,而只使用旧版 Rails 应用程序中已有的 Vue。
我已经关注了这个问题如何将 Vue 公开为全局对象 https://stackoverflow.com/questions/48775631/how-to-expose-vue-as-global-object我到了这一点,使用expose-loader,将 Vue 对象暴露在Vue.default
。本质上,暴露的“Vue”对象实际上是一个Module
真正的 Vue 对象嵌套在Vue.default
.
我通过遵循我能找到的所有文档和文章达到了这一点。这些是我能找到的最相关的:https://bibwild.wordpress.com/2019/08/01/dealing-with-legacy-and-externally-loaded-code-in-webpacker/ 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
我添加了暴露加载器配置config/webpack/development.js
environment.loaders.append('expose', {
test: require.resolve('vue'),
use: [{
loader: 'expose-loader',
options: 'Vue'
}]
})
然后我搭建了一个页面并将其设为根路由。
然后创建一个入口JS文件app/javascript/packs/application.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 包文件中推入 window 对象。这可行,但似乎也是错误的。有没有更好的办法?
Question
如何公开 Webpacker 托管的 Vue 对象,以便任何非 Webpacker 托管的脚本都可以看到它?即使其可用window
object.