jQuery-ui et webpack, comment le gérer en module?

Pour une raison quelconque, jquery-ui n'a pas bien joué avec webpack. J'ai dû exiger jquery-ui-bundle à la place.

npm i -S jquery-ui-bundle

Et ensuite l'exiger après jquery par exemple

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

jquery-ui-dist et jquery-ui-bundle ne semblent pas être maintenu par le jquery-ui. Après jquery-ui v1. 12, Il est possible d'utiliser le paquet officiel jquery-ui de npm avec webpack.

Mettre à jour jquery-ui à 1.12 en mettant à jour package.json et npm install.

Vous pouvez require chaque widget comme cela.

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

Si vous avez utilisé require("jquery-ui") avant, vous devez le remplacer par des importations distinctes pour chaque widget. Je pense que la nouvelle façon est meilleure car elle ne regroupera que le code pour le widget dont nous avons besoin utiliser.

Voir documentation sur l'utilisation du paquet npm officiel 1.12.

La réponse acceptée ne fonctionne pas pour moi car le paquet jQuery-ui sur NPM n'est pas pré-construit et ne contient donc pas jquery-ui.js; le paquet devra être construit avant utilisation ou tous les widgets inclus / utilisés individuellement.

Le moyen le plus rapide pour que tout le paquet fonctionne était de télécharger d'abord la version distribuable:

npm install jquery-ui-dist --save

J'avais besoin d'ajouter un alias pour jquery-ui-dist pour éviter une erreur 'Impossible de trouver le module' (en utilisant simplement require('jquery-ui-dist') ne fonctionnera pas, car le .js filename est différent), par ajouter ceci à webpack.config.js:

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

Enfin, vous pouvez l'utiliser dans le .fichier js où les modules sont chargés:

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

Alternativement, vous pouvez éviter d'avoir à {[8] } les scripts lors du chargement des modules, et d'avoir à déclarer jQuery en tant que variable, en utilisant ProvidePlugin dans votre webpack.config.js:

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

Webpack-jQuery-ui

Webpack-jquery-ui - utilisez ce plugin, par exemple si vous utilisez Rails 5, exécutez

 yarn add webpack-jquery-ui

Lorsque le plugin jQuery UI démarre, il vérifie si jQuery est fourni, donc

Ajoutez ce code à votre fichier de configuration webpacker (partagé.js - si vous l'utilisez avec Rails 5)

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

Ajoutez ces lignes dans le code de votre application.

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

Pour corriger ActionController::InvalidAuthenticityToken dans jquery.ajax

, Vous devez passer un authenticity_token paramètre avec tous vos PUT, POST et DELETE demandes.

Pour ce faire, vous pouvez généralement le récupérer à partir de l'en-tête avec $('[name="csrf-token"]')[0].content

Donc votre demande ressemblerait à quelque chose comme:

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

- je inclure jQuery dans mon application d'une autre manière

Au Lieu d'utiliser:

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

Vous devez ajouter 'jquery':' jQuery/src/jquery ' aux alias du fichier de configuration webpack:

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

Il fournira le nom du module 'jquery'. jQuery UI vérifie ce nom sur init.

Alors en toi App.fichier js que vous écrivez:

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.