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

Posted 2023-02-22

【中文标题】如何使用 ES6/ES7 语法导入 jQuery UI？

【英文标题】：How to import jQuery UI using ES6/ES7 syntax?

【发布时间】：2016-05-17 12:52:46

【问题描述】：

我正在尝试在我的 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 使用这个堆栈？

谢谢！

【问题讨论】：

对于初学者来说，“不起作用”是什么意思？你在哪里写那行？该元素可能尚未初始化，因此您应该使用 componentDidMount 回调

导入$后可以试试console.log($)吗？

@ZekeDroid 抱歉，在componentDidMount()，我编辑了我的问题。

@AlexPalcuie 请查看我的编辑，我认为问题出在 jQuery UI 上，selectable() 函数似乎不起作用。

“似乎不起作用” 不是任何人都可以从中排除故障的正确问题描述

【参考方案1】：

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

【讨论】：

当我尝试这个时，我在尝试运行时收到此错误：`can't execute file: /pathToRoot/bin/server.js 给出的错误是：TypeError: Object function (w) if ( !w.document ) throw new Error( "jQuery 需要一个带有文档的窗口" ); 返回工厂（w）；在 Object. (/pathToRoot/node_modules/jquery-ui/jquery-ui.js) 的 uuid (/pathToRoot/node_modules/jquery-ui/jquery-ui.js:15:3) 处没有方法“扩展” :316:3) 在 Module._compile (module.js:456:26) 在 Module._extensions..js (module.js:474:10) （休息见下一条评论）跨度>

在 Object._module3.default._extensions 的 require.extensions.(匿名函数) (/pathToRoot/node_modules/babel-core/lib/api/register/node.js:214:7)。 (匿名函数) [as .js] (/pathToRoot/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:250:71) 在 Module.load (module.js:356:32) 在 Module. _load (module.js:312:12) at Function.module._load (/pathToRoot/node_modules/piping/lib/launcher.js:32:16) at Module.require (module.js:364:17)`跨度>

如果您可以共享一个具有最少依赖关系的简单项目来重现该问题，将会很有帮助。

import jqueryui from 'jquery-ui' 对我不起作用，但 import 'jquery-ui' 对我有用

【参考方案2】：

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

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/，在其他环境中方法可能会有所不同）

【讨论】：

使用 SystemJS/jspm，这种方法适用于我，但需要添加“！”到 css 导入的末尾，例如import 'jquery-ui/themes/base/core.css!'

你能和我们分享你的 webpack.conf 吗？我尝试使用自动完成import 'jquery-ui/ui/widgets/autocomplete'; 并在我的浏览器中得到(0 , _jQuery2.default)(...).autocomplete is not a。另外，webpack 告诉我一个警告，有多个模块的名称只是大小写不同。

谢谢，这就是答案，导入核心然后你需要的小部件！ @muuvmuuv 对我来说这正是我所做的并且确实有效：import 'jquery-ui/ui/core';导入'jquery-ui/ui/widgets/autocomplete';

在将 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' - 在任何一种情况下都未定义。我很失望。请指教。

根据 jQuery 的版本，它可能只是 import 'jquery-ui/selectable';。检查node_modules/jquery-ui 中的确切路径。否则很好的答案，谢谢。

【参考方案3】：

在 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

【讨论】：

我什至无法理解他们为什么会有jquery-ui 和jquery-ui-dist 包。我在这上面浪费了很多时间。感谢您添加此答案！

谢谢，这很有帮助。如果您将最后一行替换为：import 'jquery-ui-dist/jquery-ui;

，我认为您可以跳过 resolve 阶段

@haz - 您经常需要更改您的 jquery 构建。每次都拉出整个 jQuery 库非常费力。使用resolve 功能，我推荐的还不够。否则你将一个特定的 dist 硬编码到你的代码中，这可能会改变。

嗯，不准确。跳过resolve 步骤会放弃一些语法糖，但在这种情况下不会太多。无论哪种情况，它仍然会查找由npm 和您的package.json 文件处理并包含在您的node_modules 目录中的JQuery 版本。每当您执行 npm update 时，这将更新到最新版本。

【参考方案4】：

我先，

npm install jquery-ui-bundle --save

当我需要它的时候，我

import 'jquery-ui-bundle';
import 'jquery-ui-bundle/jquery-ui.css';

【讨论】：

只是为了澄清--save 包含该库，因为它没有被手动编辑。如果您需要使用自定义代码修改任何内容，请使用 --save-dev

【参考方案5】：

Selectable 是 JQuery UI 中的一个插件。所以我们需要从中引入确切的插件。如果你需要可选择的，那么它就像：

import 'jquery-ui/ui/widgets/selectable'