Symfony 4+WebEncore集成jQuery插件报错：$ is not defined求助

看起来你遇到的是webpack模块封装导致jQuery无法全局访问的问题——毕竟webpack默认会把每个模块的变量都封装起来，不让它们泄露到全局，而Bootstrap和你的Twig内联脚本都需要全局的$或者jQuery变量。结合你的需求（不用npm/yarn装jQuery、要在Twig里用$(function())），我给你一套可行的解决方案：

步骤1：修改common.js，引入并暴露jQuery到全局 #

首先在你的common.js里引入本地的jQuery文件，然后把它挂载到window对象上——这样既让webpack打包的模块（比如Bootstrap）能访问到jQuery，也让Twig里的内联脚本能直接用$：

// src/Assets/common.js
// 引入本地的jQuery文件
import $ from './jquery-3.2.1.js';
// 将jQuery挂载到window，使其成为全局变量
window.$ = window.jQuery = $;

// 继续你的common.js原有代码...

步骤2：更新webpack.config.js配置 #

接下来调整你的webpack配置，移除重复的jQuery entry，并添加ProvidePlugin让webpack自动给所有模块注入jQuery：

var Encore = require('@symfony/webpack-encore');
const webpack = require('webpack'); // 引入webpack核心模块

Encore
 .setOutputPath('public/assets/')
 .setPublicPath('/assets')
 .cleanupOutputBeforeBuild()
 .enableSourceMaps(!Encore.isProduction())
 .enableVersioning(Encore.isProduction())
 // 移除单独的jQuery entry（已经在common.js里引入，避免重复打包）
 // .addEntry('js/jquery', './src/Assets/jquery-3.2.1.js')
 .addEntry('js/bootstrap', './src/Assets/Bootstrap/dist/js/bootstrap.bundle.js')
 .addEntry('js/common', './src/Assets/common.js')
 .addEntry('css/backend','./src/Assets/backend.css')
 .addEntry('css/admin','./src/Assets/admin.css')
 .addEntry('css/frontend','./src/Assets/frontend.css')
 .addEntry('css/bfcw','./src/Assets/bfcw.css')
 .addEntry('fonts/fa','./src/Assets/FontAwesome/web-fonts-with-css/scss/fontawesome.scss')
 .addEntry('fonts/fa-brand','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-brands.scss')
 .addEntry('fonts/fa-regular','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-regular.scss')
 .addEntry('fonts/fa-solid','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-solid.scss')
 .addEntry('fonts/fa-light','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-light.scss')
 .addEntry('js/growl', './src/Assets/growl/bootstrap-notify.js')
 .enableSassLoader()
 .enableSourceMaps(!Encore.isProduction())
 .cleanupOutputBeforeBuild()
 .enableBuildNotifications()
 // 添加ProvidePlugin，让webpack自动在所有模块中注入jQuery
 .addPlugin(new webpack.ProvidePlugin({
   $: './src/Assets/jquery-3.2.1.js',
   jQuery: './src/Assets/jquery-3.2.1.js',
 }))
 ;
module.exports = Encore.getWebpackConfig();

步骤3：确保Twig模板的JS加载顺序正确 #

最后在你的Twig模板里，一定要先加载common.js，再加载Bootstrap和其他依赖jQuery的脚本——这样全局的$才会在Bootstrap初始化前就存在：

<!-- 先加载common.js，初始化全局jQuery -->
<script src="{{ asset('assets/js/common.js') }}"></script>
<!-- 再加载Bootstrap和其他JS -->
<script src="{{ asset('assets/js/bootstrap.js') }}"></script>
<script src="{{ asset('assets/js/growl.js') }}"></script>

<!-- 你的内联脚本现在可以正常使用$了 -->
<script>
  $(function() {
    // 这里写你的动态方法调用逻辑
  });
</script>

为什么这能解决问题？ #

• ProvidePlugin：让webpack自动给每个模块（比如Bootstrap的bundle.js）注入$和jQuery变量，解决Bootstrap初始化时找不到jQuery的报错。
• 挂载到window：把jQuery暴露到全局作用域，这样Twig里的内联脚本就能直接访问$，不用把所有代码都写到打包的JS文件里，满足你管理员专属功能的需求。
• 移除重复entry：避免jQuery被多次打包，减少最终生成文件的体积。

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