Rails 5.2中CoffeeScript报Uncaught ReferenceError: $ is not defined的原因？

这个错误的核心原因是脚本加载顺序不对——你的自定义CoffeeScript代码在jQuery还没被引入的时候就执行了，自然找不到$这个jQuery的全局变量。

看看你的application.js内容：

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets

这里的//= require_tree .会加载app/assets/javascripts目录下所有的自定义脚本（包括你的welcome.coffee），但这行代码写在了require jquery之前。也就是说，浏览器先执行了你的CoffeeScript，之后才加载jQuery，所以代码里的$就会报错。

修复步骤 #

1. 调整application.js的加载顺序
   把jQuery相关的加载放在最前面，确保所有依赖jQuery的脚本（包括你的自定义CoffeeScript）都能在jQuery加载完成后再执行：

//= require jquery
//= require jquery_ujs
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

2. 确保依赖安装到位
   虽然你已经在Gemfile里加了gem 'jquery-rails'，但还是要确认已经执行过：

bundle install

3. 刷新缓存并重启服务器
   修改asset pipeline配置后，最好清除浏览器缓存，或者重启Rails服务器，确保新的加载顺序生效。

额外优化建议 #

你现在的HTML里用了onclick直接调用全局函数paintIt，结合Turbolinks的特性，后续页面切换可能会出现事件绑定失效的问题。更推荐用你CoffeeScript里已经写好的data属性绑定逻辑，把HTML改成这样：

<a href="#" data-background-color="#990000">Paint it red</a>
<a href="#" data-background-color="#009900" data-text-color="#FFFFFF">Paint it green</a>
<a href="#" data-background-color="#000099" data-text-color="#FFFFFF">Paint it blue</a>

这样既去掉了冗余的onclick属性，也更符合Rails前端开发的最佳实践，避免全局函数带来的潜在问题。

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