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

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

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

npm install --save jquery jquery-ui 

Assurez-vous d’avoir un alias jquery à résoudre avec le plugin dans le fichier webpack.config.js

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

Puis inclure deux alias dans le 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 le css-loader et le chargeur de fichiers. N’oubliez pas de npm installer ces chargeurs.

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

Et utiliser 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"); 

Pour une raison quelconque, jquery-ui ne jouait pas bien avec Webpack. J’ai dû exiger jquery-ui-bundle 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 gérés par l’équipe jquery-ui. Après jquery-ui v1.12 Il est possible d’utiliser le paquetage officiel jquery-ui de npm avec webpack.

Mettez jquery-ui à 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 utilisé require("jquery-ui") avant de devoir le remplacer par des importations séparées pour chaque widget. Je pense que la nouvelle méthode est meilleure car elle ne regroupera que le code du widget que nous devons utiliser.

Voir la documentation sur l’utilisation du paquet npm officiel 1.12.

La réponse acceptée ne fonctionne pas pour moi car le paquetage 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 le paquet entier était de télécharger d’abord la version dissortingbuable:

 npm install jquery-ui-dist --save 

J’avais besoin d’append un alias pour jquery-ui-dist afin d’éviter une erreur “Impossible de trouver le module” (utiliser just require('jquery-ui-dist') ne fonctionnera pas, car le nom de 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'); 

Vous pouvez également éviter d’avoir à require les scripts lors du chargement des modules, et devoir déclarer jQuery en tant que variable en utilisant ProvidePlugin dans votre fichier 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, lancez

  yarn add webpack-jquery-ui 

Lorsque le plug-in d’interface utilisateur jQuery démarre, il vérifie si jquery est fourni,

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 votre code d’application.

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

réparer ActionController::InvalidAuthenticityToken dans jquery.ajax

Vous devez transmettre un paramètre authenticity_token à toutes vos requêtes PUT , POST et DELETE .

Pour ce faire, vous pouvez généralement le récupérer depuis 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 append “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.

Puis, 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.