Symfony 6中如何在Twig模板中调用外部JS文件的JavaScript函数？

嗨，我来帮你解决这个问题～你遇到的ReferenceError: Can't find variable: test报错，核心原因是Webpack Encore默认会把你的JS代码打包成ES模块，模块内部的函数和变量会被包裹在闭包里，不会自动暴露到全局作用域，所以模板里的<script>直接调用test自然找不到它。

下面给你两种简单可行的解决办法：

方法一：把函数挂载到全局window对象上 #

这是最直接的方式，修改你的/assets/app_departments.js，把导出的函数显式挂载到window上，这样全局就能访问到它：

export function test(m) { console.log(m); }
// 将函数暴露到全局作用域
window.test = test;

或者你也可以直接跳过export，直接定义在window上：

window.test = function(m) { console.log(m); }

修改后重新打包（运行npm run dev或者yarn dev），模板里的test('passed')就能正常调用了。

方法二：在模板的<script>中用模块方式导入 #

如果你不想污染全局作用域，可以把模板里的<script>改成模块类型，然后导入函数：

{% block body %}
<script type="module">
  // 先获取打包后的JS文件路径
  const scriptUrl = '{{ encore_entry_script_tags('app_departments')|split('src="')[1]|split('"')[0] }}';
  // 导入函数并调用
  import { test } from scriptUrl;
  test('passed');
</script>
{% endblock %}

这种方式利用了ES模块的导入机制，不需要修改原JS文件的导出方式，但需要注意浏览器对ES模块的兼容性（现代浏览器都支持，如果你需要兼容旧浏览器可能需要额外配置）。

总结一下，第一种方法适合简单场景，快速解决问题；第二种方法更符合模块化开发的规范，避免全局变量污染，你可以根据自己的需求选择～

备注：内容来源于stack exchange，提问作者ScorpionZZZ