Necesitamos configurar nuestro equipo con todas las herramientas que utilizaremos en este módulo. En todos los casos hay versiones tanto para GNU/Linux como para Windows y Mac OS X.
Al menos debemos tener Chrome y Firefox que son los más utilizados y también es muy recomendable probar las páginas en Safari (en este caso tenemos un problema si no usamos Mac) y otros navegadores como Opera y Ms Edge.
Trabajaremos principalmente con la consola del navegador (suele abrirse con F12) pero cuando veamos Ajax necesitaremos un cliente REST (yo usaré RESTClient pero hay muchos) y en el bloque de Vue necesitaremos las Vue DevTools para depurar nuestro código.
Yo usaré Visual Studio Code pero cada uno puede usar el que más le guste, como Sublime Text, Atom, Notepad++ o incluso grandes entornos como Eclipse o Netbeans aunque no utilizaremos la mayoría de herramientas que incluyen por lo que es matar moscas a cañonazos.
Visual Studio Code puede descargarse desde https://code.visualstudio.com/.
Para programar Javascript no necesitamos ninguna extensión adicional aunque es recomendable usar algún linter como EsLint o SonarLint para acostumbrarnos a escribir buen código.
También es recomendable instalar Prettier para formatear correctamente los ficheros y Live Server para probar la web en un servidor local.
Cuando veamos Vue habrá que instalar la extensión que nos permita trabajar de forma cómoda. En VSC se llama Vue-Official.
Además cuando nuestras aplicaciones crezcan usaremos herramientas como Vite para facilitar su gestión y mejorar su rendimiento. En algunos casos también pasaremos tests a nuestro código para asegurar su buen funcionamiento. Para usar estas herramientas necesitaremos npm, el gestor de paquetes de NodeJS.
En los apuntes tenéis cómo instalarlo.
Utilizaremos git para el control de versiones por lo que deberemos instalarlo. Para instalarlo simplemente habrá que instalar el paquete git (apt-get install git).
Quien no quiera usar la consola y prefiera hacerlo desde el editor deberá instalar la extensión correspondiente.
Es una herramienta de construcción de aplicaciones que incluye un servidor de desarrollo para probar nuestro código y un module bundler llamado Rollup (similar a Webpack). Su función es unir todo el código de los distintos ficheros javascript en un único fichero que es el que se importa en el index.html y lo mismo con los ficheros CSS.
Además los bundlers proporcionan otras ventajas:
Vite también incorpora un servidor de desarrollo para hacer más cómoda la creación y prueba de nuestros proyectos.
Para testear nuestros programas utilizaremos Vitest que es una adaptación para Vite de la librería para test Jest. Lo instalaremos con npm de manera global para poderlo usar en distintos proyectos. Podéis ver un breve resumen de cómo usar test en los apuntes.
npm es el gestor de paquetes del framework Javascript Node.js y es fundamental en programación frontend especialmente como gestor de dependencias y módulos de la aplicación. Esto significa que será la herramienta que se encargará de descargar y poner a disposición de nuestra aplicación todas las librerías Javascript que vayamos a utilizar.
Para instalar npm tenemos que instalar NodeJS. Podemos instalarlo desde los repositorios como cualquier otro programa (apt install nodejs), pero no se recomienda hacerlo así porque nos instalará una versión poco actualizada.
Es mejor instalarlo desde NodeSource siguiendo las instrucciones que allí se indican, que en el caso de la mayoría de distribuciones GNU/Linux consisten en añadir el repositorio de NodeSource.
Con eso ya tendremos npm en nuestro equipo. Podemos comprobar la versión que tenemos con:
npm -v
También podemos descargarlo directamente desde NodeJS.org, descomprimir el paquete e instalarlo (dpkg -i nombre_del_paquete).
Una vez instalado podemos crear un nuevo proyecto con el comando npm init. Esto crea una carpeta para el nuevo proyecto y dentro de ella el fichero package.json con información del proyecto y de sus dependencias.
los comandos básicos de npm son install para instalar una librería y remove o uninstall para eliminarla. Para actualizar un paquete usamos el comando update.
Al instalar paquetes en algunos casos usaremos opciones:
-g: instala la librería de forma global para que esté disponible en todos nuestros proyectos no sólo en el proyecto actual--dev o -D: indica que la librería a instalar es una dependencia de desarrollo y, por tanto, no se incluirá en el código generado para producción pero sí en el código de desarrollo--save o -S: indica que la librería a instalar es una dependencia de producción. Es la copción por defecto por lo que si no ponemos ninguna opción es como poner -D. Tanto en este caso como en el anterior se incluirá en el fichero package.jsonVamos a instalar ahora globalmente la librería que usaremos en la mayoría de nuestros proyectos, el bundler Vite:
npm install -g vite
También instalaremos globalmente la librería de test Vitest que usaremos en los ejemplos de test:
npm install -g vitest
Es el corazón de cualquier proyecto npm. Declara las dependencias instaladas y sus versiones, así como scripts que se pueden ejecutar desde la terminal con el comando npm run <nombre del script>.
Ejemplo de package.json:
{
"name": "nuevoproyecto",
"version": "1.0.0",
"description": "Nuevo proyecto npm",
"main": "index.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"test": "vitest"
},
"dependencies": {
"axios": "^1.6.2",
},
"devDependencies": {
"vite": "^4.4.5",
"vitest": "^0.34.5"
},
"author": "",
"license": "ISC"
}
Vemos que en el apartado scripts tenemos tres comandos que podemos ejecutar:
dev: lanza el servidor de desarrollo de Vitebuild: crea el código de producción (en la carpeta dist)test: lanza los tests de VitestEn dependencies tenemos las librerías que necesita nuestra aplicación para funcionar (que se añadirán al código de producción) y en devDependencies las que sólo necesita para desarrollo.