import jQuery-ui und jQuery mit npm installieren

Etwas neues zu npm hier..

Ich möchte die jQuery-ui in meinem Projekt. Ich bin verwendet, um den Import sowohl jQuery und jQuery-ui mit einem script-tag in dem HTML, aber ich würde gerne importieren mithilfe von npm installieren.

Bekam ich jQuery arbeiten.

import $ from 'jquery'

Aber immer wenn ich versuche zu importieren jquery-ui bekomme ich diesen Fehler:

Uncaught ReferenceError: jQuery ist nicht definiert

Gibt es eine Menge Beiträge zu diesem Fehler. Aber alle von Ihnen scheinen zu sein, zentriert um Menschen, nur um Ihre Skript-tags für jQuery und jQuery-ui in der falschen Reihenfolge.

Kann ich nichts finden, wie zu installieren, jQuery-und jQuery-ui mit npm installieren?

Irgendwelche Ideen?

  • Sind Sie mit dem browser oder Node.js ?
  • Ich bin mit Node.js
  • Für jQuery zu arbeiten, in Knoten, ein Fenster mit einem Dokument erforderlich ist. Da keine Fenster vorhanden ist nativ in Knoten, kann man verspottet von tools wie jsdom. Mehr details finden Sie unter npmjs.com/package/jquery
  • jQuery scheint gut zu funktionieren, obwohl. Ich könnte verwirrend sein Node.js mit npm... ich bin nicht mit einem offiziellen build-tool. Aber eine, die mir gegeben. Ich arbeite gerade an einem website-Projekt und jQuery funktioniert einwandfrei. Ich kann einfach nicht scheinen, um jQuery-ui korrekt importiert?
  • Bitte werfen Sie einen Blick auf dieses tutorial sitepoint.com/setting-up-es6-project-using-babel-browserify
  • Ich Las es, aber Es sagt mir nicht, wie ich gehen würde, über importieren ein plugin/addon zu einem anderen importieren? Alle meine normalen Einfuhren funktionieren. Es ist nur die jQuery UI ein, wo es heißt jQuery is not defined trotz jQuery Import in der Zeile oben 🙁 Zur Klärung, ich bin alle. Meine Anforderungen an ein Projekt sind alle fertig. Ich möchte nur auf einige Verbesserungen an der Benutzeroberfläche, wo jQuery UI wäre sehr hilfreich.
  • ähnliche Frage

InformationsquelleAutor MLyck | 2016-07-17
  1. 12

    Habe gerade versucht zu aktualisieren jquery (auf 3.1.0) & jquery-ui (zu 1.12.0) und bekam die gleiche Fehlermeldung.

    Neuere Versionen von jquery-ui zu verlangen scheint eine Globale jQuery Variablen zu initialisieren oder neuere Versionen von jquery nicht die jQuery Globale Variablen standardmäßig nicht mehr, daher der Uncaught ReferenceError.

    Einer klaren Lösung wird global.jQuery = require('jquery') vor dem Import jquery-ui.

    Scheint es nicht zu funktionieren für browserify obwohl, da browserify priorisiert Einfuhren gegenüber anderen Ausdrücken (die Importe sind platziert auf der Oberseite des browserified code auch dann, wenn Sie platziert sind, hinter anderen Ausdrücke im original-code).

    Also, wenn Sie mit browserify, versuchen jquery@2.2.4 und jquery-ui@1.10.5, dann " importieren als:

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

    Arbeitete für mich.

    • Vielen Dank so viel für diese! Arbeiten mit laravel/gulp/webpack. Wünschte, ich fand diese 3 Stunden früher!
    InformationsquelleAutor hainq
  2. 5

    Verwendung mit webpack.

    import $ from 'jquery' pass jquery-Modul Standard-Eigenschaft auf $, so dass $ als lokale variable in Ihrem aktuellen Modul. Allerdings jquery-ui unterstützt nur amd, so, wenn Sie import zu verwenden, wird die Globale jQuery als $ innen, und führen Sie eine Funktion im Konstruktor des Moduls (können Sie Einblick in den source code).

    Also, was ist zu tun? Machen jQuery als Globale variable.

    Mein Weg mit webpack:

    1 nur das Modul importieren, die Sie verwenden möchten

    import 'jquery-ui/ui/widgets/datepicker'
import 'jquery-ui/themes/base/core.css'
import 'jquery-ui/themes/base/datepicker.css'
import 'jquery-ui/themes/base/theme.css'

    2 webpack config

    {
  plugins: [
    new webpack.ProvidePlugin({
      '$': 'jquery',
      'jQuery': 'jquery',
      'windows.jQuery': 'jquery',
    }),
  ],
}

    ProvidePlugin bieten eine Möglichkeit, um Variablen zu globalen Variablen. So, nachdem Sie ProvidePlugin, hier $ jQuery window.jQuery direkt verwendet werden können in einem Modul auch Sie haben keine import $ from 'jquery'.

    ProvidePlugin: Module Automatisch zu laden, anstatt zu importieren oder verlangen, daß Sie überall.

    Jedoch, wenn Sie nicht mit webpack, nur daran erinnern, dass Sie sollten geben Sie eine Globale variable jQuery. Zum Beispiel:

    import $ from 'jquery'
window.jQuery = $

    fügen Sie diesen code in Ihre entry-code. Es ist davon abhängig, was kompilieren system, das Sie verwenden.

    InformationsquelleAutor frustigor
  3. 1

    Für jedermann mit dem parcel.js bundler, all die standard-Vorschläge/Lösungen nicht funktionieren, wenn Sie import:

    Beispiel:

    //
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
import "jquery-ui-bundle";

//or something like, as suggested/standard
import $ from 'jquery';
window.$ = window.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/widgets/selectable';

    nicht zu funktionieren scheint, mit der Fehler jQuery ist undefiniert, da die Bibliothek das hängt davon ab, jQuery so nicht in einem sync Weg, und da parceljs endet Generierung der folgenden:

    "use strict";
var _ = _interopRequireDefault(require("jquery"));
require("jquery-ui-bundle");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
window.$ = window.jQuery = _.default;

    Zuweisung von jQuery auf-Fenster geschieht zu spät.

    Dem Update ist die Verwendung require über import (einfach, aber nicht offensichtlich ist).

    const $ = require("jquery");
window.$ = window.jQuery = $;
require("jquery-ui-bundle");

    dann parceljs generiert, die dann die Arbeit

    var $ = require("jquery");
window.$ = window.jQuery = $;
require("jquery-ui-bundle");
    InformationsquelleAutor
Schreibe einen Kommentar