¿Cómo importar jQuery UI usando la sintaxis de ES6/ES7?

jquery-ui reactjs

Question

Estoy tratando de usar alguna funcionalidad de jQuery UI en mi aplicación reactJS / Redux. He importado jQuery y jQuery UI usando:

npm install jquery jquery-ui

Y luego lo intenté:

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

Sin embargo, la interfaz de usuario de jQuery no parece importarse cuando intento hacer algo como:

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

Creo que el problema es con jQuery UI. ¿Qué estoy haciendo mal? ¿Cómo puedo hacer que jQuery UI funcione con esta pila?

¡Gracias!

Answer 1

Agregue un alias en la configuración del paquete web:

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

Guárdalos en package.json:

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

Entonces

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

Funciona para mí con el último jquery (3.2.1) y jquery-ui (1.12.1).

Ver mi blog para más detalles: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

Answer 2

Estoy utilizando con éxito la importación parcial de jquery-ui. Me refiero a importar a mi módulo solo lo que necesitaba de 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'';

(Pero tenga en cuenta que estoy usando el paquete web https://webpack.github.io/ , en otro enfoque de entorno puede ser diferente)

Answer 3

Yo primero,

npm install jquery-ui-bundle --save

Cuando lo necesito, yo

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

Answer 4

el nombre del componente es jqueryui (sin guión), use import jqueryui from ''jquery-ui'' o simplemente import ''jquery-ui''