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 utiilizaremos 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 Volar.
Tanto para Vue como para ejecutar los tests de nuestros programas 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 un module bundler (como 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 proporcionan otras ventajas:
Además Vite 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.
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 2 opciones:
-g: instala la librería de forma global para que esté disponible en todos nuestros proyectos no sólo en el proyecto actual-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.Vamos a instalar ahora globalmente la librería que usaremos en la mayoría de nuestros proyectos, el bundler Vite:
npm install -g vite
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": {
"test": "vitest"
},
"dependencies": {
"axios": "^1.6.2",
},
"devDependencies": {
"vite": "^4.4.5",
"vitest": "^0.34.5"
},
"author": "",
"license": "ISC"
}