如何使用 ES6/ES7 语法导入 jQuery UI？

IT技术 jquery jquery-ui reactjs npm redux
2021-04-19 17:39:38

我正在尝试在我的 reactJS/Redux 应用程序中使用一些 jQuery UI 功能。我已经使用以下方法导入了 jQuery 和 jQuery UI：

npm install jquery jquery-ui

然后我试过：

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

但是，当我尝试执行以下操作时，似乎没有导入 jQuery UI：

componentDidMount() {
  $('ol#myList').selectable();
}

我相信问题出在 jQuery UI 上。我究竟做错了什么？我怎样才能让 jQuery UI 与这个堆栈一起工作？

谢谢！

5个回答

我成功地使用了 jquery-ui 的部分导入。我的意思是只从 jquery-ui 导入我需要的module：

import $ from '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/core';
import 'jquery-ui/ui/widgets/selectable';

（但考虑到我使用的是 webpack https://webpack.github.io/，在其他环境中方法可能会有所不同）

你能和我们分享你的 webpack.conf 吗？我尝试使用自动完成功能import 'jquery-ui/ui/widgets/autocomplete';并进入(0 , _jQuery2.default)(...).autocomplete is not a我的浏览器。此外，webpack 告诉我一个警告，即有多个module的名称仅在大小写上有所不同。
2021-06-04 17:39:38
谢谢，这就是答案，导入core然后是你需要的widget！@muuvmuuv 对我来说这正是我所做的并且确实有效：导入'jquery-ui/ui/core'; 导入'jquery-ui/ui/widgets/autocomplete'；
2021-06-05 17:39:38
使用 SystemJS/jspm，这种方法对我有用，但需要添加 '!' 到 css 导入的末尾，例如import 'jquery-ui/themes/base/core.css!'
2021-06-08 17:39:38
根据 jQuery 的版本，它可能只是import 'jquery-ui/selectable';. 检查node_modules/jquery-ui. 否则很好的答案，谢谢。
2021-06-15 17:39:38
在 webpack 中使用 jquery-ui 时，知道为什么不能导入全局函数，如 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'- 在任何一种情况下都未定义。我很失望。请指教。
2021-06-19 17:39:38

我先来，

npm install jquery-ui-bundle --save

当我需要它时，我

import 'jquery-ui-bundle';
import 'jquery-ui-bundle/jquery-ui.css';
只是为了澄清--save包括库，因为它没有被手动编辑。如果您需要使用自定义代码修改任何内容--save-dev
2021-05-28 17:39:38

在 webpack 配置中添加别名：

resolve: {
  alias: {
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
  }
}

将它们保存在 package.json 中：

npm i --save jquery
npm i --save jquery-ui-dist

然后 

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

它适用于最后一个 jquery(3.2.1) 和 jquery-ui(1.12.1)。

详情见我的博客：http : //code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

@haz - 您经常需要更改 jquery 构建。每次都拉动整个 jQuery 库是非常费力的。我不能推荐足够的，使用该resolve功能。否则，您将特定的 dist 硬编码到您的代码中，这可能会改变。
2021-05-22 17:39:38
谢谢，这很有帮助。我认为resolve如果将最后一行替换为以下内容，则可以跳过该阶段：import 'jquery-ui-dist/jquery-ui;
2021-06-12 17:39:38
嗯，不准确。跳过这resolve一步会放弃一些语法糖，但在这种情况下不会太多。在任一情况下，它仍将查找由npm您的package.json文件处理并包含在您的node_modules目录中的 JQuery 版本。无论何时，这都会更新为最新的npm update。
2021-06-14 17:39:38
我什至无法开始理解他们为什么会有jquery-ui和jquery-ui-dist包裹。我在这上面浪费了很多时间。感谢您添加此答案！
2021-06-16 17:39:38

组件名称是 jqueryui（无连字符），使用import jqueryui from 'jquery-ui' 或干脆import 'jquery-ui'

在 require.extensions.(anonymous function) (/pathToRoot/node_modules/babel-core/lib/api/register/node.js:214:7) at Object._module3.default._extensions.(anonymous function) [as .js ] (/pathToRoot/node_modules/require-hacker/babel-transpiled-modules/requirehacker.js:250:71) 在 Module.load (module.js:356:32) 在 Module._load (module.js:312: 12) 在 Function.module._load (/pathToRoot/node_modules/piping/lib/launcher.js:32:16) 在 Module.require (module.js:364:17)`
2021-05-23 17:39:38
如果您可以共享一个具有最少依赖项的简单项目来重现问题，那将会很有帮助。
2021-05-30 17:39:38
import jqueryui from 'jquery-ui' 对我不起作用，但 import 'jquery-ui' 做了
2021-06-08 17:39:38
当我尝试此操作时，当我尝试运行时出现此错误：`无法执行文件：/pathToRoot/bin/server.js 给出的错误是：TypeError: Object function (w) { if (!w.document) { throw new Error("jQuery 需要一个带有文档的窗口"); } 返回工厂( w ); 在 Object.<anonymous> (/pathToRoot/node_modules/jquery-ui/jquery-ui.js) 的 uuid (/pathToRoot/node_modules/jquery-ui/jquery-ui.js:15:3) 没有方法“扩展” :316:3) at Module._compile (module.js:456:26) at Module._extensions..js (module.js:474:10) （休息见下一条评论）
2021-06-17 17:39:38

Selectable 是 JQuery UI 中的一个插件。所以我们需要从中引入精确的插件。如果您需要可选，那么它将类似于：

import 'jquery-ui/ui/widgets/selectable'
其它你可能感兴趣的问题
上一篇this.refs.something 返回“未定义” 下一篇ReactJS - 从另一个组件调用一个组件方法