web-dev-qa-db-fra.com

Comment importer l'interface utilisateur jQuery à l'aide de la syntaxe ES6 / ES7?

J'essaie d'utiliser certaines fonctionnalités de l'interface utilisateur jQuery dans mon application reactJS/Redux. J'ai importé à la fois jQuery et jQuery UI en utilisant:

npm install jquery jquery-ui

Et puis j'ai essayé:

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

Cependant, l'interface utilisateur de jQuery ne semble pas être importée lorsque j'essaie de faire quelque chose comme:

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

Je crois que le problème est avec jQuery UI. Qu'est-ce que je fais mal? Comment faire en sorte que l'interface utilisateur de jQuery fonctionne avec cette pile?

Merci!

jqueryjquery-uireactjsnpmredux
36
Leopold Joy

J'utilise avec succès une importation partielle de jquery-ui. Je veux dire importer dans mon module uniquement ce dont j'avais besoin 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';

(Mais tenez compte du fait que j'utilise webpack https://webpack.github.io/ , dans d'autres environnements, l'approche peut être différente)

40
basil

Je l'ai fait en premier,

npm install jquery-ui-bundle --save

Quand j'en ai besoin, je

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

Ajoutez un alias dans la configuration du webpack:

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

Enregistrez-les dans package.json:

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

Ensuite

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

Cela fonctionne pour moi avec le dernier jquery (3.2.1) et jquery-ui (1.12.1).

Voir mon blog pour plus de détails: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

5
cwtuan

nom du composant est jqueryui (pas de trait d'union), utilisez import jqueryui from 'jquery-ui' ou simplement import 'jquery-ui'

3
Alfiyum