Wie importiert man jQuery UI mit ES6/ES7 Syntax?

Ich versuche einige jQuery UI-Funktionen in meiner reactJS/Redux-Anwendung zu verwenden. Ich habe sowohl die jQuery und jQuery UI mit importierten:Wie importiert man jQuery UI mit ES6/ES7 Syntax?

npm install jquery jquery-ui

Und dann habe ich versucht:

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

jedoch jQuery UI scheint nicht importiert zu werden, wenn ich versuche, wie etwas zu tun:

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

Ich glaube, das Problem ist mit jQuery UI. Was mache ich falsch? Wie kann ich jQuery UI mit diesem Stack arbeiten?

Vielen Dank!

Quelle

2016-02-07 Leopold Joy

für den Anfang, was Sie unter „Arbeit meine ich nicht "? Wo schreibst du diese Zeile? Es ist wahrscheinlich, dass das Element noch nicht initialisiert ist, also sollten Sie den 'componentDidMount' Callback verwenden – ZekeDroid

Können Sie versuchen,' console.log ($) 'nach dem Import von' $ '? –

@ZekeDroid Sorry, es war in 'componentDidMount()', ich habe meine Frage bearbeitet. –

Komponentenname ist jQueryUI (kein Bindestrich), verwenden import jqueryui from 'jquery-ui' oder einfach import 'jquery-ui'

Quelle

2016-02-08 05:50:22 Alfiyum

Wenn ich dies versuche, bekomme ich diesen Fehler, wenn ich versuche zu laufen: 'kann ' t Datei ausführen:/pathToRoot/bin/server.js Fehler gegeben war: TypeError: Objektfunktion (w) { if (! w.document) { werfen neuen Fehler ("jQuery erfordert ein Fenster mit einem Dokument"); } Rückgabefabrik (w); } hat keine Methode 'extend' bei uuid (/pathToRoot/node_modules/jquery-ui/jquery-ui.js:15:3) bei Object. (/pathToRoot/node_modules/jquery-ui/jquery-ui.js:316:3) bei Module._compile (module.js: 456: 26) bei Module._extensions..js (module.js: 474: 10) (** Siehe nächsten Kommentar für Rest **) –

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

Es wäre hilfreich, wenn y Sie können ein einfaches Projekt mit minimalen Abhängigkeiten teilen, um das Problem zu reproduzieren. – Alfiyum

Ich bin erfolgreich Teilimport von jQueryUI verwenden. Ich meine nur in meinem Modul importieren, was ich von jquery-ui benötigt:

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';

(aber nehmen in Konto, das ich webpack bin mit https://webpack.github.io/, in einer anderen Umgebung Ansatz unterscheiden können)

Quelle

2016-08-04 00:00:47 basil

Mit SystemJS/jspm funktioniert dieser Ansatz für mich, aber erfordert '!' bis zum Ende der css Importe, z.B. 'import 'jquery-ui/themes/base/core.css!'' – greenlaw

hinzufügen Alias in webpack config:

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

speichern sie in package.json:

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

Dann

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

es mit dem letzten jquery für mich arbeiten (3.2.1) und jquery-ui (1.12.1).

Sehen Sie mein Blog für Detail: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

Quelle

2017-03-29 02:42:08 cwtuan

ich zum ersten Mal,

npm install jquery-ui-bundle --save

Wenn ich es brauche, ich

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

Quelle

2017-06-12 20:57:55 Morio

Nur zur Verdeutlichung '--save' enthält die Bibliothek, da sie nicht manuell bearbeitet wird. Wenn Sie etwas mit benutzerdefiniertem Code ändern müssen, verwenden Sie '--save-dev' – Callat

Wie importiert man jQuery UI mit ES6/ES7 Syntax?

Antwort

Verwandte Themen