web-dev-qa-db-ja.com

ES6 / ES7構文を使用してjQuery UIをインポートする方法は？

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を機能させるにはどうすればよいですか？

ありがとうございました！

jqueryjquery-uireactjsnpmredux
36
Leopold Joy

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/ を使用していることを考慮してください。他の環境ではアプローチが異なる場合があります）

40
basil

最初に、

npm install jquery-ui-bundle --save

必要なとき、私は

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

Webpack configにエイリアスを追加します。

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

5
cwtuan

コンポーネント名はjqueryui（ハイフンなし）で、import jqueryui from 'jquery-ui'または単にimport 'jquery-ui'を使用します

3
Alfiyum