Symfony 6+Encore环境下如何在模板中访问jQuery($)

问题出在你给Encore脚本配置了defer: true——这个属性会让app.js延迟到DOM完全解析后才执行，但模板里的内联脚本是同步运行的。当内联脚本执行时，app.js还没加载完成，全局的$变量自然还没定义，所以会触发报错。

下面是几种解决办法：

方案一：移除defer配置 #

直接在webpack_encore.yaml里删掉defer: true相关配置：

# webpack_encore.yaml
...
# 删除以下内容
# script_attributes:
#       defer: true

这样app.js会同步加载，内联脚本就能正常访问$。但这种方式可能会略微影响页面加载性能。

方案二：让内联脚本等待依赖加载完成 #

把内联脚本改成等待DOM加载完成后再执行，或者先检查$是否存在：

{% block javascripts %}
    {{ parent() }}
    <script>
      // 监听DOM加载完成事件，确保app.js已执行
      document.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function() {
          alert('success from template!');
        });
      });
    </script>
{% endblock %}

更稳妥的写法（应对极端情况下DOMContentLoaded先触发的场景）：

{% block javascripts %}
    {{ parent() }}
    <script>
      function runTemplateScript() {
        if (typeof $ !== 'undefined') {
          $(document).ready(function() {
            alert('success from template!');
          });
        } else {
          // 延迟100ms后再次检查
          setTimeout(runTemplateScript, 100);
        }
      }
      runTemplateScript();
    </script>
{% endblock %}

方案三：将内联脚本整合到Encore打包流程 #

把模板里的脚本代码放到单独的JS文件（比如assets/js/template-scripts.js），然后在app.js里引入：

// app.js
...
const $ = require('jquery');
global.$ = global.jQuery = $;
// 引入模板脚本
require('./template-scripts.js');

$(document).ready(function() {
    alert('success from app.js');
})

template-scripts.js内容：

$(document).ready(function() {
  alert('success from template!');
})

这种方式最符合Encore的打包规范，也能从根源上避免脚本加载顺序问题。

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