Come importare l'interfaccia utente jQuery usando la sintassi ES6/ES7?

Sto cercando di utilizzare alcune funzionalità dell'interfaccia utente jQuery nella mia applicazione reactJS/Redux. Ho importato sia jQuery e jQuery UI utilizzando:Come importare l'interfaccia utente jQuery usando la sintassi ES6/ES7?

npm install jquery jquery-ui

E poi ho provato:

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

Tuttavia jQuery UI non sembra essere importato quando provo a fare qualcosa di simile:

Credo che il problema sia con l'interfaccia utente di jQuery. Che cosa sto facendo di sbagliato? Come posso far funzionare l'interfaccia utente di jQuery con questo stack?

Grazie!

fonte

2016-02-07 Leopold Joy

per cominciare, che cosa si intende per "non funziona "? Dove stai scrivendo quella frase? È probabile che l'elemento non sia ancora inizializzato, quindi dovresti usare la callback 'componentDidMount' – ZekeDroid

Puoi provare a' console.log ($) 'dopo aver importato' $ '? –

@ZekeDroid Spiacente, era in 'componentDidMount()', ho modificato la mia domanda. –

nome del componente è jQueryUI (senza trattino), utilizzare import jqueryui from 'jquery-ui' o semplicemente import 'jquery-ui'

fonte

2016-02-08 05:50:22 Alfiyum

Quando provo, ottengo questo errore quando provo a lanciare: 'can ' t eseguire il file:/pathToRoot/bin/server.js errore dato era: TypeError: Object function (w) { if (! w.document) { throw new Error ("jQuery richiede una finestra con un documento"); } reso di fabbrica (w); } non ha alcun metodo 'estendere' in uuid (/pathToRoot/node_modules/jquery-ui/jquery-ui.js:15:3) all'oggetto. (/pathToRoot/node_modules/jquery-ui/jquery-ui.js:316:3) in Module._compile (module.js: 456: 26) in Module._extensions..js (module.js: 474: 10) (** Vedere il commento successivo per il resto **) –

a require.extensions. (Funzione anonima) (/pathToRoot/node_modules/babel-core/lib/api/register/node.js:214:7) a Object._module3.default._extensions. (Funzione anonima) [come .js] (/ pathToRoot/node_modules/require-hacker/babel-transpiled-modules/require hacker.js: 250: 71) su Module.load (modulo. js: 356: 32) a Module._load (module.js: 312: 12) a Function.module._load (/pathToRoot/node_modules/piping/lib/launcher.js:32:16) a Module.require (module.js: 364: 17) ' –

Sarebbe utile se y puoi condividere un progetto semplice con dipendenze minime per riprodurre il problema. – Alfiyum

che sto usando con successo l'importazione parziale jQueryUI. Voglio dire importare al mio modulo solo quello che mi serviva da 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';

(Ma prendere in conto che sto usando webpack https://webpack.github.io/, in altro approccio ambiente può essere diversa)

fonte

2016-08-04 00:00:47 basil

Utilizzando SystemJS/jspm, questo approccio funziona per me ma richiede l'aggiunta di '!' fino alla fine delle importazioni di css, ad es. 'importa 'jquery-ui/themes/base/core.css!'' – greenlaw

Aggiungere un alias in webpack config:

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

salvarli in package.json:

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

Poi

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

il lavoro per me con l'ultima jquery (3.2.1) e jquery-ui (1.12.1).

Vedi il mio blog per ingrandire: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

fonte

2017-03-29 02:42:08 cwtuan

ho,

npm install jquery-ui-bundle --save

quando ne ho bisogno, ho

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

fonte

2017-06-12 20:57:55 Morio

Giusto per chiarire '--save' include la libreria poiché non viene modificata manualmente. Se hai bisogno di modificare qualcosa con il codice personalizzato userai '--save-dev' – Callat

Come importare l'interfaccia utente jQuery usando la sintassi ES6/ES7?

risposta

Problemi correlati