在Rails 7中，默认的JavaScript管理方案是Importmap，它推崇使用ES模块（ESM）规范，并鼓励减少对全局变量和传统jQuery的依赖。当尝试集成一些仍依赖于全局$（jQuery）符号的旧版JavaScript库时，开发者经常会遇到Uncaught ReferenceError: $ is not defined错误。本文将以集成日期时间选择器为例，展示如何通过迁移到现代库并采用原生JavaScript初始化方式来优雅地解决这一问题。
理解问题根源：$未定义错误
传统的JavaScript开发中，许多库（包括早期版本的日期时间选择器，如tempusdominus-bootstrap-4）都假定jQuery已在全局作用域中可用，并通过$符号进行访问。然而，在Rails 7的Importmap环境中，即使你通过pin "jquery", to: "..."引入了jQuery，它通常也只会作为ES模块被加载，而不会自动将其$符号暴露给全局作用域。这意味着，任何直接尝试使用$(function() { ... })或$('#selector').plugin()的代码都将失败，因为在模块外部，$并未定义。
解决此问题的最佳实践是：
- 优先选择原生JavaScript库： 寻找那些不依赖于jQuery或提供原生JS接口的现代库。
- 采用ES模块化导入和初始化： 遵循Importmap的模块化加载机制，避免全局变量。
基于此，我们将采用@eonasdan/tempus-dominus（通常称为Tempus Dominus v6）作为日期时间选择器，因为它是一个现代、原生JavaScript驱动的库，与Importmap环境完美兼容。
集成Tempus Dominus v6日期时间选择器
以下是逐步将Tempus Dominus v6集成到Rails 7应用的详细过程。
步骤一：配置Importmap
首先，我们需要在config/importmap.rb文件中定义Tempus Dominus及其相关依赖的映射。这些映射将告诉Rails如何加载这些库。
# config/importmap.rb # 核心应用和StimulusJS pin "application", preload: true pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true pin_all_from "app/javascript/controllers", under: "controllers" # Tempus Dominus v6 及其依赖 # Font Awesome (图标库，Tempus Dominus v6 推荐使用) pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.5.1/js/all.js" # Popper.js (Bootstrap 5+ 的依赖，用于浮层定位，虽然不是直接用于日期选择器，但建议引入以确保兼容性) pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.8/dist/esm/index.js" # Tempus Dominus v6 核心库 pin "tempus-dominus", to: "https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js"
- @fortawesome/fontawesome-free: Tempus Dominus v6在显示日期/时间选择器的图标时，通常依赖于Font Awesome。
- @popperjs/core: 这是现代Bootstrap（v5及以上）的依赖，用于处理弹出窗口、工具提示等元素的定位。虽然Tempus Dominus本身可能不直接强制要求它，但作为现代前端环境的一部分，引入它有助于确保组件的正确行为和兼容性。
- tempus-dominus: 这是@eonasdan发布的Tempus Dominus库的最新版本，它提供了纯JavaScript实现，不依赖于jQuery。
步骤二：引入CSS样式表
Tempus Dominus v6需要其配套的CSS样式表才能正确渲染。我们应将其直接链接到HTML布局文件中。
Meetings
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<%= yield %>
请注意，这里保留了原始问题中的Bootstrap 4 CSS链接。Tempus Dominus v6本身设计上更倾向于与Bootstrap 5+配合，但其核心功能在Bootstrap 4环境下也能工作，只是可能需要根据实际情况调整一些样式。
步骤三：JavaScript 初始化
现在，我们需要编写JavaScript代码来初始化日期时间选择器。为了保持代码的模块化和清晰，我们建议创建一个单独的自定义JavaScript文件。
首先，在app/javascript/application.js中引入这个自定义文件：
// app/javascript/application.js import "@hotwired/turbo-rails" import "controllers" // import "jquery" // 不再需要或不应直接在此处全局导入 // import "tempusdominus-bootstrap-4" // 替换为新的Tempus Dominus v6 // 引入自定义的Tempus Dominus初始化逻辑 import "custom/init_tempus"
然后，创建app/javascript/custom/init_tempus.js文件并添加初始化逻辑：
// app/javascript/custom/init_tempus.js
import { TempusDomin 
