Как импортировать пользовательский интерфейс jQuery с использованием синтаксиса ES6/ES7?

Я пытаюсь использовать некоторые функции пользовательского интерфейса jQuery в моем приложении responseJS/Redux. Я импортировал оба 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. Что я делаю не так? Как я могу заставить jQuery UI работать с этим стеком?

Спасибо!

Ответы

Ответ 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/, в другом окружении подход может отличаться)

Ответ 2

имя компонента jqueryui (без дефиса), используйте import jqueryui from 'jquery-ui' или просто import 'jquery-ui'

Ответ 3

Во-первых,

npm install jquery-ui-bundle --save

Когда мне это нужно, я

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

Ответ 4

Добавьте псевдоним в конфигурацию 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