jquery-ui und webpack, wie man es in modul verwaltet?

Irgendeine Idee, wie man damit umgeht? Ich meine, jquery-ui scheint nicht amd zu sein und ich weiß nicht, wie ich damit umgehen soll, irgendeine Idee?

Du hast Glück, dass ich das gestern gemacht habe, es ist ziemlich einfach.

npm install --save jquery jquery-ui

Stellen Sie sicher, dass Sie einen Alias-Jias haben, der mit dem Plugin in der Datei webpack.config.js aufgelöst werden soll

...
plugins: [
    new webpack.ProvidePlugin({
      "$":"jquery",
      "jQuery":"jquery",
      "window.jQuery":"jquery"
    }),
...

Fügen Sie dann zwei Aliase in die Datei webpack.config.js ein

1. Der Ordner node_modules
2. Der Ordner jquery-ui

`` `` ``

resolve : {
    alias: {
      // bind version of jquery-ui
      "jquery-ui": "jquery-ui/jquery-ui.js",      
      // bind to modules;
      modules: path.join(__dirname, "node_modules"),

Stellen Sie sicher, dass jquery zuerst in Ihre App-Startdatei geladen wird.

var $ = require("jquery"),
        require("jquery-ui");

Wenn Sie ein Thema verwenden müssen, konfigurieren Sie den CSS-Loader und den File-Loader. Vergessen Sie nicht, diese Lader zu installieren.

module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      { test: /\.(jpe?g|png|gif)$/i, loader:"file" },

Und in Ihrer App-Startdatei verwenden.

require("modules/jquery-ui/themes/black-tie/jquery-ui.css");
require("modules/jquery-ui/themes/black-tie/jquery-ui.theme.css");

Aus irgendeinem Grund jquery-uispielte nicht gut mit Webpack. Ich musste jquery-ui-bundlestattdessen verlangen .

npm i -S jquery-ui-bundle

und dann benötigen Sie es nach jquery zB

require('jquery');
require('jquery-ui-bundle');

jquery-ui-distund jquery-ui-bundlescheinen nicht vom jquery-ui-Team gepflegt zu werden. Nach jquery-ui v1.12 Es ist möglich, das offizielle jquery-uiPaket von npm mit Webpack zu verwenden.

Aktualisieren Sie jquery-ui auf 1.12, indem Sie package.jsonund aktualisieren npm install.

Dann können Sie requirejedes Widget so.

require("jquery-ui/ui/widgets/autocomplete");
require("jquery-ui/ui/widgets/draggable");

Wenn Sie zuvor verwendet require("jquery-ui")haben, müssen Sie es für jedes Widget durch separate Importe ersetzen. Ich denke, der neue Weg ist besser, weil er nur den Code für das Widget bündelt, das wir verwenden müssen.

Siehe Dokumentation zur Verwendung des offiziellen npm-Pakets 1.12.

webpack-jquery-ui

webpack-jquery-ui - Verwenden Sie dieses Plugin, z. B. wenn Sie Rails 5 verwenden, führen Sie es aus

 yarn add webpack-jquery-ui

Wenn das jQuery UI-Plugin gestartet wird, wird überprüft, ob jquery bereitgestellt wurde

Fügen Sie diesen Code Ihrer Webpacker-Konfigurationsdatei hinzu (shared.js - wenn Sie ihn mit Rails 5 verwenden).

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

Fügen Sie diese Zeilen in Ihren App-Code ein.

require('webpack-jquery-ui');
require('webpack-jquery-ui/css');

zu beheben ActionController::InvalidAuthenticityTokeninjquery.ajax

Sie haben eine übergeben authenticity_tokenParameter mit allen PUT, POSTundDELETE Anfragen.

Dazu können Sie es normalerweise mit aus dem Header abrufen $('[name="csrf-token"]')[0].content

Ihre Anfrage würde also ungefähr so ​​aussehen:

var that = this;
$.ajax({
  url: navigator_item.url,
  data: { authenticity_token: $('[name="csrf-token"]')[0].content},
  method: 'DELETE',
  success: function(res) {
   ...
  }
});

Ich füge jQuery auf andere Weise in meine Anwendung ein

Anstatt zu verwenden:

plugins: [
new webpack.ProvidePlugin({...

Sie sollten 'jquery': 'jquery / src / jquery' zu Aliasen in der Webpack-Konfigurationsdatei hinzufügen:

module.exports = {
  resolve: {
    alias: {
        'jquery': 'jquery/src/jquery'
    }
  }

Es wird den Modulnamen 'jquery' bereitstellen. Die jQuery-Benutzeroberfläche überprüft diesen Namen bei init.

Dann schreiben Sie in Ihre app.js-Datei:

import $ from 'jquery'

import 'webpack-jquery-ui/css'
import 'webpack-jquery-ui/sortable' // if you need only sortable widget.

window.jQuery = $;
window.$ = $; // lazy fix if you want to use jQuery in your inline scripts.

Die akzeptierte Antwort funktioniert bei mir nicht, da das jQuery-ui-Paket auf NPM nicht vorgefertigt ist und daher keine enthält jquery-ui.js. Das Paket muss entweder vor der Verwendung erstellt werden oder alle Widgets müssen einzeln enthalten / verwendet werden.

Am schnellsten habe ich das gesamte Paket zum Laufen gebracht, indem ich zuerst die verteilbare Version heruntergeladen habe:

npm install jquery-ui-dist --save

Ich musste einen Alias ​​hinzufügen jquery-ui-dist, um den Fehler "Modul kann nicht gefunden werden" zu vermeiden (die Verwendung require('jquery-ui-dist')funktioniert einfach nicht, da der Dateiname .js unterschiedlich ist), indem ich diesen zu Folgendem hinzufügte webpack.config.js:

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

Schließlich können Sie dies in der .js-Datei verwenden, in die die Module geladen werden:

var jQuery = require('jquery');
require('jquery-ui'); 

Alternativ können Sie vermeiden, dass Sie requirebeim Laden der Module die Skripte verwenden und jQuery als Variable deklarieren müssen, indem Sie ProvidePlugin in Ihrer webpack.config.js verwenden:

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

Die Schritte, die für mich (in einem Rails 5.1.6-Projekt) funktioniert haben, sind mit keinem der oben genannten identisch:

Installieren Sie jquery und jquery-ui: yarn add jqueryundyarn add jquery-ui

Fügen Sie der Webpack-Konfiguration (dh in /config/webpack/environment.js) Folgendes hinzu, um $ und jquery und jQuery global festzulegen:

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery'
  })
)

Benötigen Sie die gewünschten individuellen jquery-ui-Pakete oben in Ihrem Paket (z. B. oben in /javascript/packs/application.js:

require("jquery-ui/ui/widgets/sortable")

Dann können Sie zum Beispiel $('.selector').sortable()überall in Ihrem Rucksack anrufen .

füge jquery in deine node_modules hinzu mit;

npm install --save jquery jquery-ui

und fügen Sie externe Elemente in Ihre webpack.config.js wie;

...

  externals: {
// require("jquery") is external and available
//  on the global var jQuery
"jquery": "jQuery",
"jquery-ui": "jquery-ui/jquery-ui.js", 
}

es hat bei mir funktioniert