Segunda parte: Agregar una libreria de terceros
A partir de 2010, surgieron varios administradores de paquetes de JavaScript para ayudar a automatizar el proceso de descarga y actualización de bibliotecas desde un repositorio central. Bower fue posiblemente el más popular en 2013, pero finalmente fue superado por npm alrededor de 2015. (yarn a partir 2016 ha ganado mucha atención como alternativa a npm, pero todavía usa paquetes npm)
npm fue originalmente un administrador de paquetes creado específicamente para node.js, un contexto ejecución de JavaScript diseñado para ejecutarse en el servidor, no en el frontend.
Nota : El uso de administradores de paquetes generalmente implica el uso de la línea de comandos, que en el pasado nunca se requería como desarrollador frontend. Si nunca has usado uno, puedes entrar al curso de <a rel="“nofollow" noopener”="" target="_blank">Terminal y Linea de Comandos</a>. Para bien o para mal, saber cómo usar la línea de comandos es una parte importante del JavaScript moderno (y también abre puertas en otras áreas de desarrollo).
Veamos cómo usar npm para instalar el paquete moment.js automáticamente en lugar de descargarlo manualmente. Si tienes node.js instalado, ya tienes npm instalado, lo que significa que puedes navegar en la línea de comandos a la carpeta con su archivo index.html e ingresar:
$ npm init
Despues de varias preguntas (los valores predeterminados están bien, presionas “Enter” para cada pregunta) y generar un nuevo archivo con el nombre package.json. Este es un archivo de configuración que npm usa para guardar toda la información del proyecto. Con los valores predeterminados, el contenido de package.jsondebería verse así:
{
"name": "your-project-name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": " echo \ "Error: no se especificó la prueba \" && exit 1 "
},
" author ":" ",
" license ":" ISC "
}
Para instalar el paquete de JavaScript moment.js, ahora podemos seguir las instrucciones de npm desde su página de inicio ingresando el siguiente comando en la línea de comando:
$ npm install moment --saveEste comando hace dos cosas: primero, descarga todo el código del paquete moment.js en una carpeta llamada node_modules. En segundo lugar, modifica automáticamente el archivo package.json para realizar un seguimiento de moment.js como una dependencia del proyecto.
{
"name": "modern-javascript-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": " echo \ "Error: no se especificó la prueba \" && exit 1 "
},
" author ":" ",
" license ":" ISC ",
" dependencies ": {
" moment ":" ^ 2.22.2 "
}
}
Esto es útil más adelante cuando se comparte un proyecto con otros; en lugar de compartir la carpeta node_modules (que puede volverse muy grande), solo necesitas compartir el archivo package.json y otros desarrolladores pueden instalar los paquetes requeridos automáticamente con el comando npm install.
Así que ahora ya no tenemos que descargar moment.js manualmente desde el sitio web, podemos descargarlo y actualizarlo automáticamente usando npm. Mirando dentro de la carpeta node_modules, podemos ver el archivo moment.min.js en el directorio node_modules/moment/mim. Esto significa que podemos vincularnos a la versión descargada de npm moment.min.jsen el archivo index.html de la siguiente manera:
<!-index.html-><!DOCTYPEhtml><htmllang = "en"><head><metacharset = "UTF-8"><title> Ejemplo de JavaScript </title><scriptsrc = " node_modules / moment / min / moment.min.js "></script><scriptsrc =" index.js "></script></head><body><h1> ¡Hola desde HTML! </h1>< / cuerpo></html>Que hemos logrado hasta aqui, que ahora podemos usar npm para descargar y actualizar nuestros paquetes a través de la línea de comandos. Lo malo es que ahora estamos buscando en la carpeta node_modules para encontrar la ubicación de cada paquete y lo incluimos manualmente en nuestro HTML. Eso es bastante inconveniente, así que a continuación veremos cómo automatizar ese proceso también.
