Typescript 2.6.2集成jQuery UI时运行时提示jQuery未定义求助

看起来你遇到的是jQuery UI无法找到全局jQuery实例的问题——虽然编译环节正常通过，但运行时jQuery UI依赖的全局jQuery/$没有被正确暴露。下面是针对你的TypeScript 2.6.2 + Browserify + jQuery UI场景的分步解决方案：

1. 确认依赖与类型定义安装 #

先确保所有必要的包都已正确安装：

npm install jquery jquery-ui --save
npm install @types/jquery @types/jquery-ui --save-dev

2. 修正TypeScript导入与全局暴露逻辑 #

jQuery UI默认依赖全局环境中的jQuery对象，但TypeScript的模块导入会把jQuery封装在模块作用域内，不会自动暴露到全局。你需要在main.ts最顶部手动将jQuery挂载到window对象上：

// 先导入jQuery
import * as $ from 'jquery';

// 将jQuery暴露到全局，供jQuery UI识别
(window as any).jQuery = $;
(window as any).$ = $;

// 再导入jQuery UI（如果只需要特定组件，可单独导入，比如import 'jquery-ui/ui/widgets/draggable'）
import 'jquery-ui';

// 之后即可正常使用jQuery UI功能
$('#target-element').draggable();

3. 优化Browserify构建配置（可选但推荐） #

如果上述方法仍不生效，可以用browserify-shim显式配置全局依赖关系，确保jQuery UI能精准找到jQuery：

1. 安装browserify-shim：

npm install browserify-shim --save-dev

2. 在package.json中添加shim配置：

"browserify-shim": {
  "jquery": "$",
  "jquery-ui": {
    "depends": ["jquery"]
  }
},
"browser": {
  "jquery": "./node_modules/jquery/dist/jquery.js",
  "jquery-ui": "./node_modules/jquery-ui/jquery-ui.js"
}

3. 修改构建命令，加入browserify-shim转换：

browserify main.ts --debug -p tsify -t browserify-shim 1>bundle.js

4. 检查index.html脚本加载顺序 #

如果你是通过<script>标签单独引入jQuery/jQuery UI，必须严格遵循加载顺序：jQuery → jQuery UI → 你的bundle.js：

<!-- 先加载jQuery核心 -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<!-- 再加载jQuery UI -->
<script src="node_modules/jquery-ui/jquery-ui.min.js"></script>
<!-- 最后加载打包后的业务脚本 -->
<script src="bundle.js"></script>

⚠️ 注意：如果已经将jQuery和jQuery UI打包进bundle，就不要再用script标签单独引入，避免重复加载导致冲突。

5. 验证tsconfig.json关键配置 #

确保你的tsconfig.json包含以下必要配置：

{
  "compilerOptions": {
    "module": "commonjs", // Browserify依赖CommonJS模块格式
    "moduleResolution": "node",
    "allowJs": true, // 允许导入jQuery UI这类原生JS文件
    "target": "es5", // 兼容多数主流浏览器
    "lib": ["es2015", "dom"] // 包含DOM环境的类型定义
  }
}

按照上述步骤调整后，应该就能解决运行时找不到jQuery的问题了。

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