Rails项目配置jQuery后控制台报jQuery未定义错误怎么解决

问题定位步骤 #

• 先确认当前Rails项目使用的前端打包体系：如果是Rails 6+默认的webpacker/jsbundling-rails，直接抛弃sprockets的JS引入逻辑；如果仅使用sprockets，就删除webpack相关的jQuery配置，不要同时混用两套打包体系。
• 打开Chrome开发者工具的Sources面板，搜索打包后的JS文件，确认jQuery代码是否被正确打入最终产物，若没有找到说明打包环节未正确引入jQuery。
• 手动执行bin/webpack（使用webpacker的场景）打包，查看是否有依赖缺失报错，排查npm安装的jQuery是否被正确识别。

解决方案（分两种场景） #

场景1：使用webpacker/jsbundling-rails作为唯一JS打包工具 #

1. 首先删除app/assets/javascripts/application.js里所有//= require相关的jQuery、popper、bootstrap引入，仅保留//= require_tree .即可，避免两套体系重复引入冲突。
2. 补充webpack全局暴露配置，仅靠ProvidePlugin只会给webpack打包的模块内注入变量，不会挂载到window全局：

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery', // 新增这行，把jQuery挂载到全局window对象
    Popper: ['popper.js', 'default'],
    noUiSlider: 'nouislider'
  })
)

3. 如果是在html的内联<script>标签里直接用jQuery，或是有老的第三方依赖需要全局jQuery，在app/javascript/packs/application.js入口文件最顶部添加：

import jQuery from 'jquery'
window.$ = window.jQuery = jQuery

4. 重新执行npm install确保依赖安装完整，之后重启webpack dev server，重新加载页面测试即可。

场景2：仅使用sprockets打包JS，不使用webpack处理JS #

1. 删除所有webpack相关的jQuery配置，包括ProvidePlugin里的jQuery相关配置，以及手动import jQuery的代码。
2. 确保已经安装jquery-rails gem，在Gemfile里添加gem 'jquery-rails'后执行bundle install，sprockets的//= require jquery3依赖这个gem提供的文件，单独npm安装的jQuery不会被sprockets识别。
3. 调整资产清单的引入顺序，bootstrap依赖popper和jQuery，需要把popper、jQuery放在bootstrap前面，正确顺序为：

//= require jquery3
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require_tree .

4. 清理资产缓存：执行rails assets:clobber，之后重启Rails服务测试。

验证方法 #

打开Chrome控制台，输入jQuery或者$，如果返回jQuery构造函数，说明配置生效。

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