如何在Node.js中正确引入jQuery UI？Browserify打包后调用报错

你遇到的这个报错，核心原因是jQuery UI的menu插件没有成功挂载到你引入的jQuery对象上——在Browserify的模块环境里，全局变量不会自动共享，直接引入jQuery UI的话，它找不到要扩展的jQuery实例，自然就没法给$添加menu方法。

问题修复步骤 #

1. 先确认依赖安装到位
   确保你已经正确安装了两个核心依赖：

   npm install jquery jquery-ui-dist --save
   

2. 修正依赖引入逻辑
   修改你的库代码，先把jQuery暴露到全局（或者直接传递给jQuery UI），再加载jQuery UI，这样它才能正确扩展jQuery对象：

   // 引入jQuery
   var $ = require('jquery');
   
   // 关键操作：把jQuery挂载到全局，让jQuery UI能识别到它
   window.jQuery = $;
   window.$ = $;
   
   // 引入完整的jQuery UI（包含menu插件）
   require('jquery-ui-dist/jquery-ui');
   
   // 你的菜单创建函数（注意给$target添加变量声明，避免全局污染）
   var createMenu = function (target, options) {
     var $target = $(target);
     $target.menu(options);
   };
   
   // 如果要对外暴露这个函数
   module.exports = createMenu;
   

   另一种更简洁的写法（部分jQuery UI版本支持）：直接把jQuery实例传递给jQuery UI来扩展

   var $ = require('jquery');
   // 直接关联jQuery和jQuery UI
   require('jquery-ui-dist/jquery-ui')($);
   
   var createMenu = function (target, options) {
     var $target = $(target);
     $target.menu(options);
   };
   

3. 重新打包测试
   用Browserify重新打包你的库：

   browserify your-library-file.js -o bundle.js
   

   之后在浏览器中引入打包后的bundle.js，再调用createMenu就应该能正常运行了。

额外优化提示 #

如果你的项目只需要jQuery UI的menu插件，不需要全部组件，可以单独引入对应模块来减小打包体积：

var $ = require('jquery');
window.jQuery = $;
// 只引入menu插件
require('jquery-ui-dist/jquery-ui.menu');

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