使用 npm install 导入 jQuery-ui 和 jQuery

Question

这里的 npm 有点新。

我想在我的项目中使用 jQuery-ui。 我习惯于在 HTML 中使用脚本标记导入 jQuery 和 jQuery-ui，但我想使用 npm install 导入两者。

我有 jQuery 工作。

import $ from 'jquery'

但是每当我尝试导入jquery-ui我都会收到此错误：

未捕获的 ReferenceError：未定义 jQuery

有很多关于这个错误的帖子。 但所有这些似乎都围绕着人们只是将他们的 jQuery 和 jQuery-ui 的脚本标签以错误的顺序放置。

我找不到有关如何使用 npm install 安装 jQuery 和 jQuery-ui 的任何信息？

有什么想法吗？

Answer 1

刚刚尝试更新jquery （到 3.1.0）和jquery-ui （到 1.12.0）并得到了同样的错误。

较新版本的jquery-ui似乎需要一个全局jQuery变量来初始化，或者较新版本的jquery不再默认设置jQuery全局变量，因此出现Uncaught ReferenceError 。

一个明确的解决方案是在导入jquery-ui之前设置global.jQuery = require('jquery') 。

不过，它似乎不适用于browserify ，因为browserify将导入优先于其他表达式（导入放置在浏览器化代码的顶部，即使它们被放置在原始代码中的其他表达式之后）。

因此，如果您使用的是browserify ，请尝试jquery @2.2.4 和jquery-ui @1.10.5，然后导入为：

import $ from 'jquery';
import 'jquery-ui';

为我工作。

Answer 2

与 webpack 一起使用。

import $ from 'jquery'将 jquery 模块的默认属性传递给 $，这样您就可以在当前模块中使用 $ 作为局部变量。 但是 jquery-ui 只支持 amd，所以当你使用import ，它会使用全局jQuery作为 $ inside 并在模块的构造函数中运行一个函数（你可以查看它的源代码）。

那该怎么办呢？ 将jQuery作为全局变量。

我使用 webpack 的方式：

1 只导入你想使用的模块

import 'jquery-ui/ui/widgets/datepicker'
import 'jquery-ui/themes/base/core.css'
import 'jquery-ui/themes/base/datepicker.css'
import 'jquery-ui/themes/base/theme.css'

2 网络包配置

{
  plugins: [
    new webpack.ProvidePlugin({
      '$': 'jquery',
      'jQuery': 'jquery',
      'windows.jQuery': 'jquery',
    }),
  ],
}

ProvidePlugin 提供了一种使变量成为全局变量的方法。 所以在你使用window.jQuery之后，即使你没有import $ from 'jquery' ，这里$ jQuery window.jQuery可以直接在模块中使用。

ProvidePlugin：自动加载模块，而不必在任何地方导入或要求它们。

但是，如果您不使用 webpack，请记住您应该提供一个全局变量jQuery 。 例如：

import $ from 'jquery'
window.jQuery = $

将此代码放入您的入口代码中。 这取决于您使用的编译系统。

Answer 3

对于使用parcel.js bundler的任何人，如果您使用import ，则所有标准建议/解决方案都将不起作用：

例如：

//
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
import "jquery-ui-bundle";

// or something like, as suggested/standard
import $ from 'jquery';
window.$ = window.jQuery = $;

import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/selectable.css';
import 'jquery-ui/ui/widgets/selectable';

似乎不会工作，错误 jQuery 未定义，因为依赖于 jQuery 的库以同步方式这样做，并且因为parceljs 最终生成以下内容：

"use strict";
var _ = _interopRequireDefault(require("jquery"));
require("jquery-ui-bundle");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
window.$ = window.jQuery = _.default;

在窗口上分配 jQuery 发生得太晚了。

解决方法是使用require over import （简单但不明显）

const $ = require("jquery");
window.$ = window.jQuery = $;
require("jquery-ui-bundle");

然后parceljs将生成，然后将工作

var $ = require("jquery");
window.$ = window.jQuery = $;
require("jquery-ui-bundle");