Wie importiere ich jquery mit ES6-Syntax?

126

Ich schreibe eine neue App mit (JavaScript) ES6-Syntax über babelTranspiler und die preset-es2015Plugins sowie semantic-uifür den Stil.

index.js

import * as stylesheet from '../assets/styles/app.scss';
import * as jquery2 from '../dist/scripts/jquery.min';
import * as jquery3 from '../node_modules/jquery/dist/jquery.min';

console.log($('my-app'));

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
<body>
<script src="dist/app.js"></script>
</body>
</html>

Projektstruktur

.
├── app/
│   ├── index.js
├── assets/
├── dist/
│   ├── scripts/
│   │   ├── jquery.min.js
├── index.html
├── node_modules/
│   ├── jquery/
│   │   ├── dist/
│   │   │   ├── jquery.min.js
├── package.json
└── tests/

package.json

  …
  "scripts": {
    "build:app": "browserify -e ./app/index.js -o ./dist/app.js",
    "copy:jquery": "cpy 'node_modules/jquery/dist/jquery.min.js' ./dist/scripts/",
    …
  },
  "devDependencies": {
    "babel-core": "6.3.x",
    "babel-preset-es2015": "6.3.x",
    "babelify": "7.2.x",
    "cpy": "3.4.x",
    "npm-run-all": "1.4.x",
    "sassify": "0.9.x",
    "semantic-ui": "2.1.x",
    …
  },
  "browserify": {
    "transform": [
      [ "babelify", { "presets": [ "es2015"]}],
      [ "sassify", { "auto-inject": true}]
    ]
  }

Frage

Die Verwendung des klassischen <script>Tags zum Importieren jqueryfunktioniert einwandfrei, aber ich versuche, die ES6-Syntax zu verwenden.

Wie importiere ich jquery, um semantic-uidie ES6-Importsyntax zu erfüllen ?
Soll ich aus dem node_modules/Verzeichnis oder meinem dist/(wo ich alles kopiere) importieren ?

javascript jquery ecmascript-6 browserify semantic-ui Édouard Lopez
quelle

2

Das Importieren aus distmacht keinen Sinn, da dies Ihr Distributionsordner mit der produktionsbereiten App ist. Wenn Sie Ihre App erstellen, sollten Sie die Inhalte der Knotenmodule in den Ordner dist aufnehmen, einschließlich jQuery.

nem035

Auch nicht aus einer scss- Datei importieren . Es sei denn, es gibt ein tolles Plugin, das ich verpasse!

CodingIntrigue

@RGraham heißt sassify , ein browserify-Plugin. Ich inspiriere mich von Oncletom Gist

Édouard Lopez

Ich werde das überprüfen, danke!

CodingIntrigue

@RGraham - Die Syntax sieht seltsam aus, aber die Verwendung von "require" für CSS / Sass-Dateien wird mit Build-Tools wie Webpack + Babel empfohlen. z.B. require ("../ node_modules / bootstrap / dist / css / bootstrap.min.css");

Arcseldon

127

index.js

import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;

Wie @nem im Kommentar vorgeschlagen hat, sollte der Import zunächst erfolgen von node_modules/:

Das Importieren aus dist/macht keinen Sinn, da dies Ihr Distributionsordner mit der produktionsbereiten App ist. Wenn Sie Ihre App erstellen, sollten Sie das, was sich node_modules/darin befindet, in den dist/Ordner aufnehmen, einschließlich jQuery.

Als nächstes ist der Glob - * as- falsch, da ich weiß, welches Objekt ich importiere ( z. B. jQuery und $), sodass eine direkte Importanweisung funktioniert.

Zuletzt müssen Sie es mit dem Skript anderen Skripten aussetzen window.$ = $.

Dann importiere ich als beide $und jQueryum alle Verwendungen abzudecken, browserifyentferne Importduplikationen, also kein Overhead hier! ^ o ^ y

Édouard Lopez
quelle

6

Nicht sicher , ob jeder y'all noch um , aber könnten Sie erklären die Notwendigkeit window.$ = $. Ich verstehe nicht, warum das nötig ist. Werden andere Skripte nicht automatisch in einem einzigen jsSkript gebündelt, wenn browserify magisch ist?

Qarthandso

13

Warum nicht einfach haben import {$,jQuery} from 'jquery';? Warum so viele Importe?

Jackie

4

Wie finden Sie den Namen exakten Klassennamen, dh jQuery?

Avinash Raj

13

Ich bekomme entweder Module '"jquery"' has no exported member 'jQuery'oder Module '"jquery"' has no default exportwas vermisse ich bitte?

daslicht

4

Ältere Versionen von jQuery verwenden keine benannten Exporte. Neuere Versionen tun dies. Die Importmethode hängt davon ab, welche Version von jQuery Sie verwenden.

pmont

54

Basierend auf der Lösung von Édouard Lopez, aber in zwei Zeilen:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;

ha7ilm
quelle

2

Dies funktionierte für mich, während der akzeptierte Antwortansatz nicht ... Ich habe fast dasselbe verwendet: importiere $ aus 'jquery'; window.jQuery = $; window. $ = $;

Arcseldon

3

eine Zeile:window.$ = window.jQuery = require('jquery');

Nabil Baadillah

2

@NabilBaadillah require(CommonJS) ist nicht import(ES-Modul) und der Einzeiler scheint mit nicht möglich zu sein import. (

Interessiert es

13

Importieren Sie den gesamten Inhalt von JQuery in den globalen Bereich. Dadurch wird $ in den aktuellen Bereich eingefügt, der alle aus der JQuery exportierten Bindungen enthält.

import * as $ from 'jquery';

Jetzt gehört das $ zum Fensterobjekt.

Ivan Hertz
quelle

1

das hat bei mir funktioniert. Die oberste "{jQuery als $} aus 'jquery' importieren;" gibt einen Fehler aus, der besagt, dass "jQuery" nicht gefunden wurde.

SpaceMonkey

12

Sie können einen Modulkonverter wie folgt erstellen:

// jquery.module.js
import 'https://code.jquery.com/jquery-3.3.1.min.js'
export default window.jQuery.noConflict(true)

Dadurch werden von jQuery eingeführte globale Variablen entfernt und das jQuery-Objekt standardmäßig exportiert.

Verwenden Sie es dann in Ihrem Skript:

// script.js
import $ from "./jquery.module.js";

$(function(){
  $('body').text('youpi!');
});

Vergessen Sie nicht, es als Modul in Ihr Dokument zu laden:

<script type='module' src='./script.js'></script>

http://plnkr.co/edit/a59ETj3Yo2PJ0Aqkxbeu?p=preview

Yukulélé
quelle

1

Dieser hat geholfen! Im Allgemeinen probiere ich gerne Grundlagen aus, bevor ich IDE / DevEnv verwende. Ohne Node / NPM / Babble wollte ich den Import und Export von ES6 verstehen. Ich hatte es geschafft, den grundlegenden Import und Export zum Laufen zu bringen, hatte aber Probleme mit der Einbeziehung von Abfragen. Ich hatte meinen benutzerdefinierten Code als Modul geschrieben, verwies aber weiterhin auf die traditionelle Weise auf jquery, indem ich das Skript-Tag in HTML verwendete. Am Ende hatte ich zwei Skript-Tags, eines mit jquery und eines mit app.js. Mit Ihrer Antwort konnte ich mein erstes jquery-Skript-Tag loswerden und das Zwischenprodukt jquery.module.js verwenden, wie Sie vorgeschlagen haben.

Sidnc86

9

Die akzeptierte Antwort hat bei mir nicht funktioniert.
Hinweis: Wenn Sie Rollup verwenden, wissen Sie nicht, ob diese Antwort
nach
npm hierher gehört. Speichern Sie jquery
in custom.js

import {$, jQuery} from 'jquery';

oder

import {jQuery as $} from 'jquery';

Ich habe eine Fehlermeldung erhalten : Modul ... node_modules / jquery / dist / jquery.js exportiert nicht jQuery
oder
Modul ... node_modules / jquery / dist / jquery.js exportiert $
rollup.config.js nicht

export default {
    entry: 'source/custom',
    dest: 'dist/custom.min.js',
    plugins: [
        inject({
            include: '**/*.js',
            exclude: 'node_modules/**',
            jQuery: 'jquery',
            // $: 'jquery'
        }),
        nodeResolve({
            jsnext: true,
        }),
        babel(),
        // uglify({}, minify),
    ],
    external: [],
    format: 'iife', //'cjs'
    moduleName: 'mycustom',
};

statt Rollup Inject versucht

commonjs({
   namedExports: {
     // left-hand side can be an absolute path, a path
     // relative to the current directory, or the name
     // of a module in node_modules
     // 'node_modules/jquery/dist/jquery.js': [ '$' ]
     // 'node_modules/jquery/dist/jquery.js': [ 'jQuery' ]
        'jQuery': [ '$' ]
},
format: 'cjs' //'iife'
};

package.json

  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-eslint": "6.1.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-external-helpers": "6.18.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-register": "6.9.0",
    "eslint": "2.12.0",
    "eslint-config-airbnb-base": "3.0.1",
    "eslint-plugin-import": "1.8.1",
    "rollup": "0.33.0",
    "rollup-plugin-babel": "2.6.1",
    "rollup-plugin-commonjs": "3.1.0",
    "rollup-plugin-inject": "^2.0.0",
    "rollup-plugin-node-resolve": "2.0.0",
    "rollup-plugin-uglify": "1.0.1",
    "uglify-js": "2.7.0"
  },
  "scripts": {
    "build": "rollup -c",
  },

Dies funktionierte:
Die Plugins für Rollup Inject und CommonJS wurden entfernt

import * as jQuery from 'jquery';

dann in custom.js

$(function () {
        console.log('Hello jQuery');
});

Ritin
quelle

Es sieht so aus, als ob namedExportses im CommonJS-Plugin nicht mehr existiert

Nicolas Hoizey

7

Wenn es jemandem hilft, werden Javascript-Importanweisungen gehisst. Wenn eine Bibliothek eine Abhängigkeit (z. B. Bootstrap) von jquery im globalen Namespace (Fenster) hat, funktioniert dies NICHT:

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
import 'bootstrap/dist/js/bootstrap.min';

Dies liegt daran, dass der Import von Bootstrap angehoben und ausgewertet wird, bevor jQuery an das Fenster angehängt wird.

Eine Möglichkeit, dies zu umgehen, besteht darin, jQuery nicht direkt zu importieren, sondern stattdessen ein Modul zu importieren, das selbst jQuery importiert UND an das Fenster anfügt.

import jQuery from './util/leaked-jquery';
import 'bootstrap/dist/js/bootstrap.min';

wo leaked-jquerysieht aus wie

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
export default $;
export jQuery;

EG, https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js

craigmichaelmartin
quelle

6

Webpack-Benutzer fügen Ihrem pluginsArray das Folgende hinzu .

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];

Muhammad Reda
quelle

4

Was ist der Vorteil dieses Ansatzes? Weil Sie sich hier an Ihr Bauwerkzeug binden.

Édouard Lopez

Nur so habe ich es zum Laufen gebracht. Ich habe es versucht, import {$, jQuery} from 'jquery';aber id hat nicht funktioniert, glaube ich, weil es in anderen Modulen nicht definiert (importiert) ist.

Muhammad Reda

2

Dies ist die beste Lösung für Webpack-Benutzer, da jQuery in allen Dateien global verfügbar sein sollte, ohne die redundanten Importanweisungen.

Amir

1

import {jQuery as $} from 'jquery';

Farsheed
quelle

1

Es heißt, jQuery wurde nicht gefunden. Die andere Antwort lautete "import * as $ from 'jquery';". Weißt du warum das passiert? Meine JS-Datei, in die ich jquery importiere, ist Teil einer Angular / Typescript-Datei

SpaceMonkey

1

Ich habe diese genaue Syntax noch nicht veröffentlicht und sie hat in einer ES6 / Webpack-Umgebung funktioniert:

import $ from "jquery";

Entnommen direkt von der NPM-Seite von jQuery . Hoffe das hilft jemandem.

Stephen Shank
quelle

1

Wenn Sie keine JS-Build-Tools / NPM verwenden, können Sie Jquery direkt einschließen als:

import  'https://code.jquery.com/jquery-1.12.4.min.js';
const $ = window.$;

Sie können den Import überspringen (Zeile 1), wenn Sie jquery bereits mithilfe des Skript-Tags unter head eingefügt haben.

VNN456
quelle

Ich weiß nicht warum, aber dieser hat für mich funktioniert, als es keine anderen taten. Jede andere Importanweisung als die bloße hat import 'filepath/jquery.js'einen Fehler ausgelöst, dass das Modul die gewünschte Funktion nicht exportiert oder $ beim Anblick des Wortes keine Funktion oder nur ein SyntaxError ist from.

Galaktischer Ketchup

0

Installieren und speichern Sie sie zunächst in package.json:

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

Zweitens fügen Sie einen Alias in der Webpack-Konfiguration hinzu:

resolve: {
  root: [
    path.resolve(__dirname, '../node_modules'),
    path.resolve(__dirname, '../src'),
  ],
  alias: {
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
  },
  extensions: ['', '.js', '.json'],
}

Es funktioniert bei mir mit der letzten jquery (3.2.1) und jquery-ui (1.12.1).

Weitere Informationen finden Sie in meinem Blog: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

cwtuan
quelle

0

Jquery importieren (Ich habe mit 'npm install [email protected]' installiert)

import 'jquery/jquery.js';

Fügen Sie Ihren gesamten Code, der von jquery abhängt, in diese Methode ein

+function ($) { 
    // your code
}(window.jQuery);

oder deklarieren Sie die Variable $ nach dem Import

var $ = window.$

Yoseph
quelle

0

Ich wollte die bereits erstellte jQuery (von jquery.org) verwenden, und alle hier genannten Lösungen funktionierten nicht. Um dieses Problem zu beheben, wurden die folgenden Zeilen hinzugefügt, damit es in nahezu jeder Umgebung funktioniert:

 export default  ( typeof module === 'object' && module.exports && typeof module.exports.noConflict === 'function' )
    ? module.exports.noConflict(true)
    : ( typeof window !== 'undefined' ? window : this ).jQuery.noConflict(true)

Ivan Castellanos
quelle

Ivan Castellanos Sie sollten Ihr Beispiel erweitern, um besser zu verstehen, wie man es anwendet

north.inhale

0

Sie können so importieren

import("jquery").then((jQuery) => {
  window.$ = jQuery;
  window.jQuery = jQuery;
  import("bootstrap").then((_bs)=>{
    $(function() {});
  })
});

SlingEr.
quelle

0

Mein Projektstapel ist: ParcelJS + WordPress

WordPress hat jQuery v1.12.4 selbst und ich habe auch jQuery v3 ^ als Modul für andere abhängige Module importiert sowie bootstrap/js/dist/collapsezum Beispiel ... Leider kann ich aufgrund anderer modularer Abhängigkeiten von WordPress nicht nur eine jQuery-Version belassen. Und natürlich gibt es Konflikte zwischen zwei jquery-Versionen. Denken Sie auch daran, dass wir für dieses Projekt zwei Modi haben, in denen Wordpress (Apache) / ParcelJS (NodeJS) ausgeführt wird, was alles ein wenig schwierig macht. Bei der Lösung dieses Konflikts wurde also gesucht, manchmal brach das Projekt links, manchmal rechts ab. SO ... Meine endgültige Lösung (ich hoffe es so ...) ist:

    import $ from 'jquery'
    import 'popper.js'
    import 'bootstrap/js/dist/collapse'
    import 'bootstrap/js/dist/dropdown'
    import 'signalr'

    if (typeof window.$ === 'undefined') {
        window.$ = window.jQ = $.noConflict(true);
    }

    if (process) {
        if (typeof window.jQuery === 'undefined') {
            window.$ = window.jQuery = $.noConflict(true);
        }
    }

    jQ('#some-id').do('something...')    

    /* Other app code continuous below.......... */

Ich habe immer noch nicht verstanden, wie ich selbst bin, aber diese Methode funktioniert. Fehler und Konflikte zweier jQuery-Versionen treten nicht mehr auf

Norden einatmen
quelle

0

Wenn Sie Webpack 4 verwenden, lautet die Antwort: Verwenden Sie das ProvidePlugin. Ihre Dokumentation behandelt speziell angle.js mit jquery- Anwendungsfall:

new webpack.ProvidePlugin({
  'window.jQuery': 'jquery'
});

Das Problem ist, dass bei Verwendung der importSyntax angle.js und jquery immer importiert werden, bevor Sie window.jQuery jquery zuweisen können ( importAnweisungen werden immer zuerst ausgeführt, unabhängig davon, wo sie sich im Code befinden!). Dies bedeutet, dass Angle window.jQuery immer als undefiniert anzeigt, bis Sie es verwenden ProvidePlugin.

Martin Konecny
quelle

0

Pika ist ein CDN, das sich um die Bereitstellung von Modulversionen beliebter Pakete kümmert

<script type='module'>
    import * as $ from 'https://cdn.skypack.dev/jquery';

    // use it!
    $('#myDev').on('click', alert);
</script>

Skypack ist Pika, daher können Sie auch Folgendes verwenden: import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

SamGoody
quelle

Wie importiere ich jquery mit ES6-Syntax?

index.js

index.html

Projektstruktur

package.json

Frage

Antworten:

index.js