使用 npm install 导入 jQuery-ui 和 jQuery答案

【问题标题】：import jQuery-ui and jQuery with npm install使用 npm install 导入 jQuery-ui 和 jQuery
【发布时间】：2016-11-19 21:59:41
【问题描述】：

这里的 npm 有点新。

我想在我的项目中使用 jQuery-ui。我习惯于在我的 HTML 中使用 script 标签导入 jQuery 和 jQuery-ui，但我想使用 npm install 导入。

我使用 jQuery。

import $ from 'jquery'

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

Uncaught ReferenceError: jQuery is not defined

关于这个错误的帖子很多。但他们似乎都以人们为中心，只是将 jQuery 和 jQuery-ui 的脚本标签以错误的顺序排列。

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

有什么想法吗？

【问题讨论】：

你用的是浏览器还是Node.js？
我正在使用 Node.js
要让 jQuery 在 Node 中工作，需要一个带有文档的窗口。由于 Node 中不存在这样的窗口，因此可以通过 jsdom 等工具来模拟。更多详情请参考npmjs.com/package/jquery
jQuery 似乎工作正常。我可能将 Node.js 与 npm 混淆了……我没有使用官方的构建工具。但是给了我一个。我正在做一个网站项目，jQuery 工作正常。我似乎无法正确导入 jQuery ui？
请看本教程sitepoint.com/setting-up-es6-project-using-babel-browserify

标签： javascript jquery jquery-ui npm

【解决方案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';

为我工作。

【讨论】：

非常感谢您！适用于 laravel/gulp/webpack。真希望我能早 3 小时找到这个！
当 jquery-ui 与 webpack 一起使用时，知道为什么不能导入全局函数，如 Sine、Circ、Elastic、Back、Bounce github.com/jquery/jquery-ui/blob/master/ui/effect.js#L932 吗？当我尝试导入时，这些函数总是未定义的。我尝试了不同的方式import {Sine} from 'jquery-ui' 或import {Sine} from 'jquery-ui/ui/effect' - 在任何一种情况下都是未定义的。我很失望。请指教。

【解决方案2】：

与 webpack 一起使用。

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

那该怎么办？将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 配置

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

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

ProvidePlugin：自动加载模块，而不必到处导入或要求它们。

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

import $ from 'jquery'
window.jQuery = $

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

【讨论】：

对于 Webpack，您可以使用 resolve 来强制所有包使用相同版本的 jquery

【解决方案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");

【讨论】：