如何搭配Turbo配置Rails UJS并兼容旧jQuery代码？

疑问明确答复 #

• 无需在Gemfile添加gem 'jquery-rails'：该gem是资产管道时代的依赖，你当前使用Webpacker管理前端资源，完全不需要引入该gem，UJS也没有内置到Rails后端包中，通过npm包引入即可。
• 无需执行yarn add jquery-ujs：jquery-ujs是旧版依赖jQuery的UJS实现，你之前使用的@rails/ujs是官方维护的无jQuery依赖的版本，兼容性更强，只需要安装@rails/ujs即可。
• 之前注释的UJS引入与启动代码需要恢复：你提到的兼容性PR已经解决了Turbo和UJS的共存问题，注意引入顺序必须是先启动UJS，再引入Turbo，顺序错误会导致功能冲突。
• jQuery全局变量配置需要保留：你的遗留jQuery代码、select2等第三方jQuery插件都依赖全局的$/jQuery变量，删除该配置会触发变量未定义报错。

具体操作步骤 #

1. 安装缺失的@rails/ujs依赖：

yarn add @rails/ujs

2. 修改application.js代码，调整引入顺序，最终完整代码如下：

// Allow global access to jQuery and $
var jQuery = require('jquery')
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;

// 恢复UJS引入与启动，必须放在Turbo引入之前
import Rails from "@rails/ujs"
Rails.start()

import "@hotwired/turbo-rails"

// select2 menus
require("select2")

// tooltips
import tippy from 'tippy.js'
import 'tippy.js/dist/tippy.css';

// stimulus js
import { Application } from "stimulus"

// Flatpickr date picker
import Flatpickr from "stimulus-flatpickr"

import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
application.register("flatpickr", Flatpickr)
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

额外兼容注意事项 #

• 原有绑定在$(document).ready()上的jQuery事件需要修改为绑定turbo:load事件，否则Turbo页面切换时不会触发对应逻辑，示例如下：

// 旧写法
$(function() {
  // 你的逻辑
})

// 兼容Turbo的新写法
$(document).on('turbo:load', function() {
  // 你的逻辑
})

• 如果遇到UJS的data-remote请求返回的JS脚本不执行的情况，可以在响应头中添加Turbo-Visit: false即可正常兼容。

内容的提问来源于stack exchange，提问作者dwayne