加载了 JqueryUI 的 Browserify 无法正常工作

Question

我在使用 Browserify 加载 Jquery-UI 时遇到问题。

jquery 和 jquery-ui 的节点模块加载正常，没有问题。只有当我尝试使用 browserify 将它们放入一个包中并加载 JqueryUI datepicker 时，我才会在浏览器中收到以下 javascript 错误：

jQuery.Deferred 异常：$(...).datepicker 不是函数 TypeError: $(...).datepicker 不是函数

app.js 包含以下内容：

window.$ = window.jQuery = require('jquery');
require('jquery-ui');

我也在使用 gulp 和 laravel-elixer，我的 package.json 包含：

{
   "private": true,
   "scripts": {
     "production": "gulp --production",
     "dev": "gulp watch",
   },
   "dependencies": {
     "gulp": "^3.9.1",
     "jquery": "^3.1.0",
     "jquery-ui": "^1.12.0",
     "laravel-elixir": "^5.0.0"
   }
}

gulpfile.js 包含：

var elixir = require('laravel-elixir');
elixir(function (mix) {
    mix.sass('app.scss');
    mix.browserify('app.js');
    mix.version(['css/app.css', 'js/app.js']);
});

这是一个错误还是我做错了什么？谢谢

Answer 1

可能您使用的是 jQuery-UI 1.12。 Browserify 与新版本不兼容。 官方升级页面说：

如果您使用的是 browserify：browserify 本身不支持我们拥有的 UMD 标头，并且 deamdify 插件存在阻塞错误。如果您依赖该组合，请帮助修复该错误！

https://jqueryui.com/upgrade-guide/1.12/

我自己没有尝试过，但您可以通过需要单独的小部件来使其工作

var autocomplete = require("jquery-ui/ui/widgets/autocomplete");