Importer jQuery

1. Utilisez la balise Script pour importer jQuery
2. Utiliser la syntaxe ES6 pour importer jQuery
3. Utiliser Browserify/Webpack pour importer jQuery
4. Utiliser AMD (Asynchronous Module Definition) pour importer jQuery

Il existe plusieurs façons d’importer jQuery en utilisant différentes plates-formes. Ce didacticiel montre différentes manières d’importer jQuery dans l’environnement.

Utilisez la balise Script pour importer jQuery

C’est la méthode la plus courante pour importer le fichier jQuery dans la balise HTML script. Nous pouvons soit donner un lien vers la source, soit télécharger le fichier et donner le chemin d’accès au fichier dans la source.

Voir exemple :

En utilisant le lien :

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Utilisation du fichier téléchargé :

<script src="C:\Users\etc\jquery-3.6.0.min.js"></script>

Les deux méthodes sont utiles dans l’importation jQuery de base.

Utiliser la syntaxe ES6 pour importer jQuery

Babel est un compilateur JavaScript de nouvelle génération. Babel a la fonctionnalité de compiler les modules ES6 et ES2015 du code JavaScript.

Cette méthode n’est prise en charge que pour les compilateurs comme Babel ; les navigateurs ne prennent pas en charge ES6/ES2015. Découvrez ci-dessous comment importer jQuery à l’aide de la syntaxe ES6.

import {$, jQuery} from 'jquery';
// to use jQuery
window.$ = $;
window.jQuery = jQuery;

Ou d’une manière plus simple :

import jQuery from 'jquery';
window.$ = window.jQuery = jQuery;

Les deux méthodes sont pratiques pour les compilateurs comme Babel.

Utiliser Browserify/Webpack pour importer jQuery

Browserify et Webpack peuvent être utilisés de plusieurs manières. Nous pouvons importer jQuery en tant que variable dans Browserify/Webpack.

Voir exemple :

var $ = require('jquery');

Pour plus d’informations, la documentation officielle peut être consultée ci-dessous.

1. Browserify
2. Webpack

Utiliser AMD (Asynchronous Module Definition) pour importer jQuery

Asynchronous Module Definition (AMD) est le format de module créé pour les navigateurs. Nous pouvons importer le jQuery dans AMD en utilisant une fonction.

Voir exemple :

define(['jquery'], function($) {
  // code here
});

Pour plus d’informations sur AMD, voir ici.