Cocoon(Ruby Gem)生产环境失效问题求助

嘿，这个问题我太熟悉了！本地开发模式下资产加载顺序比较宽松，但生产环境是打包压缩后的，依赖顺序错了就会直接炸锅。你已经定位到根源是Cocoon在jQuery之前加载，那咱们直接来解决：

1. 针对传统Sprockets资产管道（Rails 5及之前，或Rails 6+仍用Sprockets） #

打开app/assets/javascripts/application.js，调整引入顺序，必须保证jQuery和jquery_ujs在Cocoon之前：

//= require jquery
//= require jquery_ujs
//= require cocoon
//= require_tree .

⚠️ 注意：如果//= require_tree .在Cocoon前面，可能会提前加载包含Cocoon引用的文件，所以一定要把Cocoon的引入放在require_tree .之前，或者确保你的自定义JS里没有提前调用Cocoon的方法。

2. 针对Webpacker（Rails 6+） #

如果你的项目用Webpacker管理JS，打开app/javascript/packs/application.js，按顺序导入：

import 'jquery'
import 'jquery_ujs'
import 'cocoon'

Webpack会按导入顺序打包，这样就能保证Cocoon在依赖加载完成后才初始化。

3. 针对Rails 7+ Importmaps #

如果用的是Rails 7的Importmaps，先在config/importmap.rb里正确pin依赖：

pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.4/dist/jquery.js"
pin "jquery_ujs", to: "https://ga.jspm.io/npm:rails/jquery-ujs@5.0.2/lib/assets/javascripts/jquery_ujs.js"
pin "cocoon", to: "https://ga.jspm.io/npm:cocoon-js@0.9.2/src/cocoon.js"

然后在app/javascript/application.js里按顺序导入：

import "jquery"
import "jquery_ujs"
import "cocoon"

4. 部署时的关键步骤 #

修改完之后，部署生产环境前一定要预编译资产：

rails assets:precompile RAILS_ENV=production

如果用Capistrano这类部署工具，确保配置里包含了资产预编译的任务，避免部署后资产还是旧的顺序。

最后可以验证一下：部署后打开生产环境页面，查看浏览器控制台的Network标签，确认jquery.js、jquery_ujs.js是在cocoon.js之前加载的，这样就不会再出现Uncaught ReferenceError: jQuery is not defined的报错啦！

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