En este tutorial vamos a ver cómo puedes instalar jQuery, la famosa librería de JavaScript. La mayor parte de las veces se opta por incluir el script de jQuery desde una CDN, aunque también es habitual descargarlo e incluirlo desde los archivos locales e incluso instalarlo mediante algún gestor de paquetes.
Contenidos
Descarga el script de jQuery
Este es uno de los métodos de instalación más sencillos, pues bastará con que te descargues la última versión de jQuery desde aquí y la incluyas en tu plantilla HTML. Debes descargarte la última versión comprimida de producción. Por ejemplo, podrías situar el archivo en el directorio /js de tu proyecto.
Lo recomendable es que incluyas jQuery justo antes de la etiqueta <\body>.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Instalación de jQuery</title>
</head>
<body>
...
<script src="js/jquery-3.5.1.min.js"></script>
</body>
</html>En caso de que haya más scripts que usen jQuery, deberías incluirlos después de jQuery. También es habitual incluir jQuery en la cabecera, aunque en este caso debes asegurarte de que el DOM está listo antes de realizar cualquier tipo de tarea, ya que de lo contrario, si por ejemplo intentas obtener algún elemento mediante su id, este podría no estar todavía presente.
Incluye jQuery desde una CDN
También puedes incluir jQuery desde alguna CDN, y de hecho es recomendable hacer esto cuando tu web está en producción, ya que de este modo te asegurarás de que el script se cargue lo más rápido posible. Esto es debido a que las redes CDN «Content Delivery Network» disponen de varios servidores alrededor del mundo, por lo que de este modo la latencia a la hora de obtener archivos siempre será más baja.
Existen diferentes CDN que podrías utilizar. A continuación tienes algunas de ellas:
- Google: jQuery en la CDN de Google
- Microsoft: jQuery en la CDN de Microsoft
- CDNJS: jQuery en la CDN de CDNJS
- jsDelivr: jQuery en la CDN de jsDelivr
En este ejemplo usaremos la CDN de Google. Para incluir jQuery desde cualquier CDN basta con que enlaces a la versión de jQuery que quieres incluir, tal que así:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Introducción a jQuery</title>
</head>
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>En este ejemplo hemos agregado la versión 3.5.1 de jQuery. Además, siempre puedes guardar una copia local de jQuery en tu sistema para usarla como fallback.
Instala jQuery mediante npm
Para instalar jQuery en tu proyecto mediante npm sigue estos pasos:
- Abre una ventana de línea de comandos y sitúate en el directorio de tu proyecto.
- Luego introduce el siguiente comando:
npm install jquery - Ahora ya podrás hacer referencia a la versión de jQuery que hayas instalado. jQuery estará en el directorio
/node_modules/jquery/dist/jquery.min.js. - También puedes importar jQuery de esta forma
import $ from "jquery";
En caso de que lo quieras importar mediante Webpack, edita el archivo webpack.config.js y agrega lo siguiente:
...
plugins: [
new webpack.ProvidePlugin({
"$":"jquery",
"jQuery":"jquery",
"window.jQuery":"jquery"
}),
...Instala jQuery mediante Yarn
Para instalar jQuery mediante Yarn sigue estos pasos:
- Abre una ventana de línea de comandos y sitúate en el directorio de tu proyecto.
- Introduce el siguiente comando para instalar jQuery:
yarn add jquery - Importa jQuery en tu proyecto:
import * as jQuery from 'jquery';
Y con esto ya debería estar instalado.
Instala jQuery mediante Bower
jQuery también soporta la instalación mediante el gestor de paquetes Bower. Vamos a dar por hecho que ya tienes Bower instalado. Para instalar jQuery usando Bower debes seguir estos pasos:
- Abre una ventana de línea de comandos y sitúate en el directorio de tu proyecto.
- Introduce el siguiente comando para instalar jQuery:
bower install jquery - El comando anterior descargará e instalará el script de jQuery, por lo que ahora ya podrás encontrar jQuery en el directorio
bower_components, en concreto, en el directoriobower_components/jquery/dist/, en donde encontrarás tanto la versión comprimida de jQuery como la minimizada.
En caso de que no quieras instalar todo los archivos extra que se instalan con Bower, también puedes instalar jQuery introduciendo este comando en la terminal de comandos:
bower install http://code.jquery.com/jquery-3.5.1.min.jsY esto ha sido todo.
Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.
Justo lo que buscaba, muchas gracias, muy bien explicado ;)