如何在Rails 6或Rails 7 Alpha引擎中使用jQuery UI及相关jQuery库

问题核心原因 #

你当前的报错$ is not defined是因为jQuery核心库没有被正确加载到页面中，你只引入了jQuery UI，缺失了jQuery本身的引入配置。

依赖配置正确性确认 #

你当前将jquery-ui-rails、jquery-rails设为add_dependency是正确的，这就是运行时依赖，引擎在生产环境运行时需要加载这些gem提供的静态资源，不需要调整为其他依赖类型。

修复步骤（Rails 6.1.4 引擎场景，Asset Pipeline方案，可避开Webpacker配置问题） #

1. 新增/修正JavaScript manifest配置
   在你的引擎app/assets/javascripts/custom_page/application.js文件（如果不存在就新建该文件）中添加以下引入：

//= require jquery
//= require jquery-ui
//= require_tree .

2. 更新assets manifest链接配置
   修改你的app/assets/config/custom_page_manifest.js，添加JS目录的链接规则：

//= link_directory ../stylesheets/custom_page .css
//= link_directory ../javascripts/custom_page .js

3. 在引擎布局文件中引入JS资源
   在引擎的默认布局文件app/views/layouts/custom_page/application.html.erb的head标签内，确保引入了对应JS资源：

<%= javascript_include_tag "custom_page/application", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "custom_page/application", "data-turbo-track": "reload" %>

4. 调整内联脚本执行时机
   你的测试内联脚本可以调整为等待DOM加载完成后执行，避免资源加载顺序问题：

<script type='text/javascript'>
  document.addEventListener('DOMContentLoaded', function() {
    $('.datepicker').datepicker();
  });
</script>

修复步骤（Rails 7 Alpha2 引擎场景，避开Importmap配置问题，兼容Asset Pipeline方案） #

Rails 7默认切换到Importmap，但引擎场景下Asset Pipeline的静态资源加载逻辑依然兼容，按以下步骤调整：

1. 在engine.rb的Engine类内添加资源预编译配置：

config.assets.precompile += %w( custom_page/application.js custom_page/application.css )

2. 其余配置和上述Rails 6的步骤1-4完全一致即可。

jqtree适配说明 #

后续需要加载jqtree时，直接将jqtree的JS和CSS文件放入引擎的app/assets/javascripts和app/assets/stylesheets目录下，在对应的manifest文件中添加引入即可，无需额外配置。

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