Jak zaimportować jQuery UI przy użyciu składni ES6/ES7?

Question

Próbuję użyć niektórych funkcji jQuery UI w mojej aplikacji reactJS/Redux. Mam importowane zarówno jQuery i jQuery UI przy użyciu:

npm install jquery jquery-ui 

A potem próbowałem:

import $ from 'jquery'; 
import jQuery from 'query'; 
import jQuery-ui from 'jquery-ui'; 

Jednak jQuery UI nie wydaje się być importowane, gdy próbuję zrobić coś takiego:

componentDidMount() { 
    $('ol#myList').selectable(); 
} 

Uważam, że problem dotyczy interfejsu użytkownika jQuery. Co ja robię źle? Jak mogę uzyskać interfejs użytkownika jQuery do pracy z tym stosem?

Dziękujemy!

Answer 1

nazwa składnika jest jQueryUI (bez myślnika), użyj import jqueryui from 'jquery-ui' lub po prostu import 'jquery-ui'

Answer 2

ja z powodzeniem przy użyciu częściowego import z jQueryUI. Znaczy importować do mojego modułu tylko to, co potrzebne z 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'; 

(Ale uwzględniające że używam WebPACK https://webpack.github.io/, w drugim podejściu środowisko może się różnić)

Answer 3

Dodaj alias w WebPack config:

resolve: { 
    alias: { 
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js' 
    } 
} 

zapisać je w package.json:

npm i --save jquery 
npm i --save jquery-ui-dist 

Następnie

import $ from 'jquery'; 
import 'jquery-ui'; 

pracować dla mnie z ostatniej jQuery (3.2.1) i jQuery UI (1.12.1).

Zobacz mój blog na szczegółach: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

Answer 4

raz pierwszy,

npm install jquery-ui-bundle --save 

Kiedy muszę, ja

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