Vue+TypeScript项目中如何让lib-jitsi-meet识别jQuery

我之前在Vue CLI + TypeScript项目里集成lib-jitsi-meet时也碰到过一模一样的问题——明明装了jQuery并局部引入，可调用JitsiConnection时还是报$ is not defined。核心原因是lib-jitsi-meet的minified版本依赖全局环境中的$对象，你通过import * as $ from 'jquery'引入的jQuery只在当前模块作用域生效，并没有暴露到全局window上，所以jitsi的代码找不到它。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：通过Vue CLI配置自动注入全局jQuery（最符合Vue项目规范） #

如果你的项目用的是Vue CLI 3+，可以借助webpack的ProvidePlugin让jQuery自动成为全局变量，不用手动在每个文件里引入：

1. 确保已经安装了jQuery：

yarn add jquery

2. 在项目根目录创建或修改vue.config.js，添加以下配置：

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery' // 确保window上也挂载一份
      })
    ]
  }
}

配置完重启开发服务器，webpack会自动在所有模块中注入$和jQuery，lib-jitsi-meet就能正常读取到依赖了。

方案2：手动将jQuery挂载到全局window #

如果不想改webpack配置，也可以在项目入口文件（比如main.ts）里手动把jQuery挂载到window上：

import * as $ from 'jquery';

// TypeScript需要断言window的类型，避免类型报错
(window as any).$ = $;
(window as any).jQuery = $;

这样整个项目的全局环境就有了$对象，lib-jitsi-meet的代码就能找到它了。

方案3：直接在HTML中全局引入（快速验证用） #

如果只是想快速验证功能，也可以跳过模块化引入，直接在public/index.html里通过script标签引入jQuery和lib-jitsi-meet：

<!-- 放在public/index.html的body末尾 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="<%= BASE_URL %>vendors/lib-jitsi-meet-min.js"></script>

这种方式下，你不需要在组件里import任何东西，直接使用全局的JitsiMeetJS和$即可。不过缺点是不符合模块化规范，也不好管理版本。

另外，如果你用TypeScript开发，记得安装jQuery的类型声明文件，避免类型报错：

yarn add @types/jquery --dev

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