Symfony+Webpack Encore项目中jQuery未定义错误求助

问题根源 #

Webpack Encore默认会将jQuery封装在模块局部作用域内，不会自动暴露到全局window对象，但你的Revolution Slider代码（包括rs6.js和自定义初始化逻辑）直接引用了全局的jQuery变量，导致找不到该变量而报错。

解决步骤 #

• 配置Webpack Encore自动提供全局jQuery
  在项目根目录的webpack.config.js中添加autoProvidejQuery()配置：

  Encore
      // ... 保留你已有的其他配置
      .autoProvidejQuery()
  ;
  

  这个配置会自动将$和jQuery挂载到全局window对象，同时让Bootstrap这类依赖jQuery的库也能自动识别到它。

• 调整App.js的代码顺序（可选，增强稳定性）
  将jQuery的引入逻辑移到所有依赖它的资源之前，甚至手动显式暴露到全局（防止autoProvide配置未生效）：

  // 优先处理jQuery
  const $ = require('jquery');
  window.jQuery = window.$ = $; // 手动挂载到全局
  
  // 再加载其他资源
  import './styles/app.scss';
  import './bootstrap';
  require('bootstrap');
  require('@fortawesome/fontawesome-free/js/all.js');
  
  // 最后加载Revolution Slider相关JS
  import './custom/js/rs6.js';
  
  // ... 你的滑块初始化代码
  

• 确认依赖已安装
  如果尚未安装jQuery，执行以下命令安装：

  npm install jquery --save-dev
  

• 重新编译前端资源
  修改配置后，重新运行编译命令：

  # 开发环境
  npm run dev
  # 生产环境
  npm run build
  

完成以上步骤后，全局jQuery变量就能被Revolution Slider正常识别，滑块的响应式功能应该就能正常工作了。

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