使用 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 的信息？

有任何想法吗？

原文由 MLyck 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 将导入优先于其他表达式（导入放置在 browserified 代码之上，即使它们放置在原始代码中的其他表达式之后）。

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

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

为我工作。

原文由 hainq 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 提供了一种使变量成为全局变量的方法。 So after you use ProvidePlugin, here $ jQuery window.jQuery can be used directly in a module even you have no import $ from 'jquery' .

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

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

 import $ from 'jquery'
window.jQuery = $

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

原文由 frustigor 发布，翻译遵循 CC BY-SA 3.0 许可协议