web-dev-qa-db-fra.com

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

aucune idée de comment faire face à cela? Je veux dire que jquery-ui ne semble pas être une DMLA et je ne sais pas comment gérer ça, une idée?

jquery-uiwebpack
57
François Richard

vous avez de la chance que je l'ai fait hier, c'est plutôt facile.

npm install --save jquery jquery-ui

Assurez-vous que vous avez l'alias jquery à résoudre avec le plugin dans le webpack.config.js

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

Ensuite, incluez deux alias dans le fichier webpack.config.js

  1. Le dossier node_modules
  2. Le dossier 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"),

Assurez-vous que jquery est chargé en premier dans le fichier de démarrage de votre application.

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

Si vous devez utiliser un thème, configurez css-loader et le chargeur de fichiers. N'oubliez pas d'installer NPM ces chargeurs.

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

Et utilisez-le dans le fichier de démarrage de votre application.

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

Pour une raison quelconque, jquery-ui n'a pas joué à Nice avec webpack. Je devais demander jquery-ui-bundle à la place. 

npm i -S jquery-ui-bundle

et ensuite l'exiger après jquery, par ex.

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

jquery-ui-dist et jquery-ui-bundle ne semblent pas être gérés par l'équipe jquery-ui. After jquery-ui v1.12 Il est possible d’utiliser le paquetage officiel jquery-ui à partir de npm avec webpack.

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

Ensuite, vous pouvez require chaque widget comme celui-ci.

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

Si vous avez déjà utilisé require("jquery-ui"), vous devez le remplacer par des importations distinctes pour chaque widget. Je pense que la nouvelle méthode est préférable car elle ne regroupera que le code du widget que nous devons utiliser.

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

47
Aruna Herath

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

Le moyen le plus rapide de faire fonctionner tout le paquet é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 afin d'éviter une erreur 'Impossible de trouver le module' (utiliser uniquement require('jquery-ui-dist') ne fonctionnera pas, car le nom du fichier .js est différent), en ajoutant 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');

Sinon, vous pouvez éviter de require les scripts lors du chargement des modules et de 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'
    })
],
11
chrBrd

webpack-jquery-ui

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

 yarn add webpack-jquery-ui

Lorsque le plug-in jQuery UI démarre, il vérifie si jquery est fourni, donc 

Ajoutez ce code à votre fichier de configuration Webpacker (shared.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 paramètre authenticity_token avec toutes vos demandes PUT, POST et DELETE.

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) {
   ...
  }
});

J'inclus jQuery dans mon application d'une autre manière

À la place 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 de module 'jquery'. L'interface utilisateur de jQuery vérifie ce nom sur init.

Ensuite, dans votre fichier app.js, 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.
8
Stanley Shauro

Les étapes qui ont fonctionné pour moi (dans un projet Rails 5.1.6) ne sont identiques à aucune des précédentes:

Installez jquery et jquery-ui: yarn add jquery et yarn add jquery-ui

Ajoutez les éléments suivants à la configuration Webpack (c'est-à-dire dans /config/webpack/environment.js) pour définir globalement $, jquery et jQuery:

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

Exigez le ou les packages jquery-ui individuels de votre choix en haut de votre pack (par exemple en haut de /javascript/packs/application.js:

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

Ensuite, vous pouvez appeler, par exemple, $('.selector').sortable() n'importe où dans votre pack.

0
Ollie H-M