Turbo.visit('/') 不适用于 Rails 6.1.3 中的 Webpacker

问题描述

我正在使用 webpacker 在 Rails 6.1.3 应用程序中设置 Turbo。除了一个问题外，它似乎正在正常运行。我无法在我的 js 文件中引用它：

// app/javascript/javascripts/shared.js

Turbo.visit('/');

在我的控制台中引发错误：

Uncaught ReferenceError: Turbo is not defined
    at HTMLDocument.<anonymous> (shared.js:4)
    at HTMLDocument.dispatch (jquery.js:4670)
    at HTMLDocument.elemData.handle (jquery.js:4490)
    at dispatch (turbo.es2017-esm.js:387)
    at Session.notifyApplicationAfterPageLoad (turbo.es2017-esm.js:4822)
    at Session.pageBecameInteractive (turbo.es2017-esm.js:4718)
    at PageObserver.pageIsInteractive (turbo.es2017-esm.js:3880)
    at HTMLDocument.PageObserver.interpretReadyState (turbo.es2017-esm.js:3840)

有什么想法吗？

这是我的配置：

// app/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbo from "@hotwired/turbo"
import "jquery"
import "bootstrap"
import "../stylesheets/application"
window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js')
Rails.start()

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.prepend(
  'Provide',new webpack.ProvidePlugin({
    $: 'jquery',jQuery: 'jquery',Rails: '@rails/ujs',Popper: ['popper.js','default']
  })
)

module.exports = environment

解决方法

// app/javascript/javascripts/shared.js
import Turbo from "@hotwired/turbo"
Turbo.visit('/');

import 不会创建在您的文件之间共享的全局变量。相反，它将模块导入到当前作用域中。每个文件都有自己的作用域。

见：

• MDN: import
• MDN: Javascript Modules
• Webpacker Module Methods

,

似乎这是使它起作用的设置：

import Rails from "@rails/ujs"
import { Turbo } from "@hotwired/turbo-rails"
window.Turbo = Turbo
Rails.start()

添加 window.Turbo 使其在 application.js 范围之外可用。