Symfony 6 Webpack Encore无法使用JS类问题求助

核心原因 #

Webpack Encore（本质基于Webpack）默认采用模块作用域，你的AutoComplete类会被封装在模块内部，不会自动暴露到全局window对象上。而普通网页中直接运行JS时，类会自动挂载到全局作用域，所以能正常访问。当你手动替换public目录的代码时，相当于绕过了模块打包流程，类回到全局作用域自然能工作；但执行yarn encore dev重新打包后，代码又恢复模块封装状态，导致AutoComplete is not defined错误复现。

解决方案 #

方案1：手动将类暴露到全局（快速临时解决） #

在你的AutoComplete.js文件末尾添加一行代码，把类挂载到window对象，强制让它成为全局变量：

// AutoComplete.js
class AutoComplete {
  // 你的类逻辑代码
}

// 暴露到全局作用域
window.AutoComplete = AutoComplete;

这样打包完成后，模板中的实例化代码就能正常访问到AutoComplete类。

方案2：使用ES模块导入（推荐的规范做法） #

更符合Webpack模块机制的方式是在入口JS文件中导入并实例化类，而非依赖全局变量：

1. 在主入口JS文件（比如assets/js/app.js）中导入AutoComplete：

// app.js
import AutoComplete from './path/to/AutoComplete'; // 替换为你的AutoComplete.js实际路径

document.addEventListener('DOMContentLoaded', function () {
  const ac = new AutoComplete();
});

2. 确保Webpack Encore配置文件中正确包含这个入口（通常默认已配置app.js）：

// webpack.config.js
Encore
  // ...其他配置项
  .addEntry('app', './assets/js/app.js')
;

3. 模板中仅需引入Encore生成的打包文件，移除原来的手动实例化代码：

{# 你的Twig模板文件 #}
{{ encore_entry_script_tags('app') }}

方案3：单独配置类的打包入口 #

如果需要将AutoComplete作为独立模块打包，可以在Encore配置中添加单独入口，再结合方案1的全局暴露：

// webpack.config.js
Encore
  // ...其他配置项
  .addEntry('auto-complete', './assets/js/AutoComplete.js')
;

之后在模板中引入这个单独的打包文件即可。

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