Importar jQuery

1. Use la etiqueta Script para importar jQuery
2. Use la sintaxis ES6 para importar jQuery
3. Utilice Browserify/Webpack para importar jQuery
4. Use AMD (Definición de módulo asíncrono) para importar jQuery

Hay varias formas de importar jQuery usando diferentes plataformas. Este tutorial demuestra diferentes formas de importar jQuery al entorno.

Use la etiqueta Script para importar jQuery

Este es el método más común para importar el archivo jQuery en la etiqueta HTML script. Podemos dar un enlace a la fuente o descargar el archivo y dar la ruta al archivo en la fuente.

Ver ejemplo:

Usando el enlace:

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

Usando el archivo descargado:

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

Ambos métodos son útiles en la importación básica de jQuery.

Use la sintaxis ES6 para importar jQuery

Babel es un compilador de JavaScript de última generación. Babel tiene la funcionalidad de compilar módulos ES6 y ES2015 del código JavaScript.

Este método solo es compatible con compiladores como Babel; los navegadores no son compatibles con ES6/ES2015. Vea cómo importar jQuery usando la sintaxis de ES6 a continuación.

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

O una forma más sencilla:

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

Ambos métodos son convenientes para compiladores como Babel.

Utilice Browserify/Webpack para importar jQuery

Browserify y Webpack se pueden usar de varias maneras. Podemos importar jQuery como una variable en Browserify/Webpack.

Ver ejemplo:

var $ = require('jquery');

Para más información, la documentación oficial se puede ver a continuación.

1. Browserify
2. Webpack

Use AMD (Definición de módulo asíncrono) para importar jQuery

La definición de módulo asíncrono (AMD) es el formato de módulo creado para los navegadores. Podemos importar jQuery en AMD usando una función.

Ver ejemplo:

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

Para obtener más información sobre AMD, consulte aquí.