如何使用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'