如何在Vaadin 23/24中全局定义jQuery以使用jQuery插件？

1. 全局window对象被冻结 #

Vaadin 23+ 在生产模式（Vaadin 24则覆盖开发+生产全模式）下会将全局window对象设置为不可扩展，这是原有jQuery集成方案失效的核心原因：

• Vaadin 14中，直接给window挂载jQuery/$这类全局变量完全可行，因为全局对象默认可扩展。
• Vaadin 23生产模式及Vaadin 24全模式下，Object.isExtensible(window)返回false，此时尝试给window新增属性会静默失败；如果jQuery插件试图给jQuery对象添加自身方法（比如$.fn.myplugin），也会因jQuery对象被冻结而抛出can't define property "myplugin": Object is not extensible错误。

2. ES模块作用域隔离更严格 #

Vaadin 23+ 对ES模块的作用域管控更贴近标准规范：

• Vaadin 14中，模块间的全局变量共享相对宽松，jquery-loader.js挂载的全局变量能被后续加载的myplugin-loader.js正常读取。
• Vaadin 23+中，ES模块的隔离性更强，即便你在jquery-loader.js里尝试给window赋值，后续模块也无法访问到这些变量，直接抛出ReferenceError: jQuery is not defined。

3. 前端构建工具的规范升级 #

Vaadin 23+ 用Vite替代了Vaadin 14的Webpack作为前端构建工具，两者对ES模块的处理逻辑差异明显：

• Webpack对全局变量挂载有兼容性兜底，能一定程度上容忍非标准的模块行为。
• Vite严格遵循ES模块规范，不会自动提升模块内的全局变量挂载操作，依赖全局变量的第三方插件自然无法获取到jQuery实例。

适配Vaadin 23+的jQuery插件集成方案 #

针对上述变化，可通过以下方式修复jQuery插件的集成问题：

• 优先选用ES模块兼容版插件：选择支持import导入的jQuery插件版本，直接在模块内导入使用，完全避开全局变量依赖。
• 手动包装非ES模块插件：如果只有全局版插件可用，可通过动态脚本注入的方式处理：

  // jquery-loader.js
  import * as $ from 'jquery';
  export default $;
  

  // myplugin-loader.js
  import $ from './jquery-loader.js';
  
  // 动态创建脚本加载插件
  const script = document.createElement('script');
  script.src = new URL('my-plugin/dist/myplugin.min.js', import.meta.url).href;
  script.onload = () => {
    // 若插件需要全局jQuery，可临时挂载（注意全局对象是否可扩展）
    // 或直接调用插件初始化方法并传入$
  };
  document.head.appendChild(script);
  

• 临时关闭全局对象冻结（不推荐）：在Vaadin配置中设置vaadin.frontend.freezeWindow=false可关闭全局对象冻结，但会降低应用安全性，仅适合临时调试。

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