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

Question

我正在尝试在我的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 与这个堆栈一起工作？

谢谢！

Answer 1

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

Answer 2

我先

npm install jquery-ui-bundle --save

当我需要的时候，我

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

Answer 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

Answer 4

组件名称为jqueryui（无连字符），使用

import jqueryui from 'jquery-ui'

或者只是

import 'jquery-ui'

Answer 5

Selectable 是 JQuery UI 中的一个插件。所以我们需要从中导入精确的插件。如果您需要可选择，那么它会像：

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

Answer 6

使用https://stackoverflow.com/a/51271892/1510777中的craigmichaelmartin的解决方案。

简短版本：将代码放入名为“leaked-jquery.js”的文件中，然后导入该文件而不是“jquery”。

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
export default $;
export { jQuery };