Je construis une application Web dans VueJS mais je rencontre un problème. Je veux utiliser une extension jQuery (cropit pour être spécifique) mais je ne sais pas comment instancier/exiger/importer de la bonne manière sans obtenir d'erreur.
J'utilise l'outil officiel CLI et le modèle de Webpack pour mon application.
J'ai inclus jQuery comme ceci dans mon fichier main.js:
import jQuery from 'jQuery'
window.jQuery = jQuery
Maintenant, je construis un composant éditeur d'image où je veux instancier comme suit:
export default {
ready () {
$(document).ready(function ($) {
$('#image-cropper-wrapper-element').cropit({ /* options */ })
})
},
}
Mais je continue à avoir des erreurs ... Maintenant, ma question est de savoir comment instancier correctement jQuery et les plugins via NPM/Webpack/Vue?
Merci d'avance!
Option n ° 1: utiliser ProvidePlugin
Ajoutez le ProvidePlugin au tableau de plugins dans build/webpack.dev.conf.js
et build/webpack.prod.conf.js
afin que jQuery devienne globalement disponible pour tous vos modules:
plugins: [
// ...
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
Option n ° 2: utiliser le module Expose Loader pour webpack
Comme @TremendusApps le suggère dans sa réponse, ajoutez le paquet Expose Loader :
npm install expose-loader --save-dev
Utilisez dans votre point d’entrée main.js
comme ceci:
import 'expose?$!expose?jQuery!jquery'
// ...
Vous devez utiliser le chargeur globals
ou le chargeur expose
pour vous assurer que Webpack inclut la bibliothèque jQuery dans votre sortie de code source et qu'elle ne génère pas d'erreurs lorsque vous utilisez $ dans vos composants.
// example with expose loader:
npm i --save-dev expose-loader
// somewhere, import (require) this jquery, but pipe it through the expose loader
require('expose?$!expose?jQuery!jquery')
Si vous préférez, vous pouvez l'importer (l'exiger) directement dans votre configuration Webpack en tant que point d'entrée. Je comprends donc, mais je n'ai pas d'exemple à ce sujet.
Alternativement, vous pouvez utiliser le chargeur globals comme ceci: https://www.npmjs.com/package/globals-loader
Commencez par installer jquery à l’aide de npm,
npm install jquery --save
J'utilise:
global.jQuery = require('jquery');
var $ = global.jQuery;
window.$ = $;
Je l'utilise comme ça:
import jQuery from 'jQuery'
ready: function() {
var self = this;
jQuery(window).resize(function () {
self.$refs.thisherechart.drawChart();
})
},
Étape 1 Nous nous plaçons avec le terminal dans le dossier de notre projet et installons JQuery via npm ou yarn.
npm install jquery --save
Étape 2 Dans notre fichier où nous voulons utiliser JQuery, par exemple app.js (resources/js/app.js), nous incluons le code suivant dans la section script.
// We import JQuery
const $ = require('jquery');
// We declare it globally
window.$ = $;
// You can use it now
$('body').css('background-color', 'orange');
// Here you can add the code for different plugins