Wie importiere ich jQuery in die ES6-Syntax für semantische UI-Kompatibilität?

JQuery in ES6-Syntax für semantische UI-Kompatibilität importieren

Frage:

Eine App erstellen Die Verwendung der ES6-Syntax mit Babel-Transpiler und Semantic-UI für das Styling erfordert den Import von jQuery. Bei Verwendung des <script> Der Tag-Ansatz stimmt nicht mit der ES6-Importsyntax überein. Dies wirft zwei Fragen auf:</script>

1. Wie kann jQuery mithilfe der ES6-Syntax importiert werden, um die Verwendung von semantic-ui zu ergänzen?
2. Sollte der Import aus dem Verzeichnis node_modules/ oder dist/ stammen (wo die app kompiliert ist)?

Antwort:

Codeänderung

Um jQuery effektiv mit der ES6-Syntax zu importieren, ändern Sie die Datei index.js wie folgt:

import { $, jQuery } from 'jquery';
// Export for other scripts to access
window.$ = $;
window.jQuery = jQuery;

Quelle importieren

Bezüglich der Importquelle wird empfohlen, jQuery aus dem Verzeichnis node_modules/ zu importieren. Dieser Ansatz ist auf den Verteilungsprozess abgestimmt, bei dem Assets während der Kompilierung normalerweise von node_modules/ in den Ordner dist/ verschoben werden.

Überlegungen

1. Spezifischer Import: Vermeiden Verwenden des Glob * als Importanweisung, da dies in diesem Szenario, in dem die spezifischen Objekte ($ und jQuery) bekannt sind, nicht erforderlich ist.
2. Offenlegung für andere Skripte: Durch Offenlegung von jQuery für andere Skripte Mit window.$ = $ stellen Sie die Zugänglichkeit während Ihres gesamten Projekts sicher.
3. Importsicherheit: Trotz des Imports von Alias ​​und Namen verhindert browserify Duplikate und damit den Overhead.

Das obige ist der detaillierte Inhalt vonWie importiere ich jQuery in die ES6-Syntax für semantische UI-Kompatibilität?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!