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）＆amp; 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 webpack config

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

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

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

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

import $ from 'jquery'
window.jQuery = $

将此代码放入您的输入代码中。它取决于您正在使用的编译系统。

Answer 3

对于使用parcel.js捆绑软件的任何人，如果您使用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上使用import（简单但不明显）

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

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

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

使用npm install导入jQuery-ui和jQuery

3 个答案: