Recuerdo que hace años, empecé a programar en JavaScript y todo era mucho más fácil. Incluir código javascript en un documento HTML era tan fácil como añadir etiquetas JavaScript a tu documento HTML.
<script>
console.log("Hola Mundo");
</script>
Las cosas han cambiado mucho desde entonces y ahora tenemos diferentes formas de añadir JavaScript a nuestro proyecto. Lo cierto es que el sistema antiguo sigue funcionando, pero quizás no sea el método más adecuado para proyectos grandes.
Aprenderemos a integrar nuestro código javascript en un documento html usando npm. Usaremos el clásico script «Hola mundo» junto con los módulos npm.
La manera Clásica
Hasta ahora, siempre que usamos una librería javascript para nuestros proyectos, la incluimos de dos maneras:
Nos descargamos el archivo y de forma local lo enlazamos con la etiqueta script:
<!-- Incluimos nuestra libreria javascript descargada. -->
<script src="jquery.min.js"></script>
Enlazamos nuestra librería javascript con un repositorio online. Existen muchos que se pueden encontrar en cdnjs
<!-- Incluimos nuestra librería usando el repositorio cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Estos dos métodos funcionan muy bien porque solo tenemos que preocuparnos de ir escribiendo nuestro código e ir incluyendo las librerías necesarias. El problema es que cuando el proyecto es muy grande, el código empieza a volverse caótico.
El método más actual
Consiste en utilizar paquetes npm y luego usarlos en el navegador. Digamos que npm es un gestor de paquetes de Node.js que ejecuta JavaScript en el servidor, o en cualquier otro lugar. El caso es que este método se está volviendo cada vez más popular y cada vez son más los frameworks que incorporan en su documentación este método de configuración.
Al principio puede parecer un poco confuso y es probable que cuando intentes usarlo por primera vez no sepas como incluir los módulos npm en el navegador, así que vamos a ello.
Requisitos a tener en cuenta.
Antes de empezar, debes instalar Node.js y npm en tu ordenador. Te lo puedes descargar desde aquí
Una vez lo hayas instalado comprueba que te funcione. Para ello teclea npm en el terminal y asegúrate de que no te de error.
También tienes que instalar dos módulos más: browserify y watchify.
npm install -g browserify
npm install -g watchify
¿Cómo usar los módulos npm en el navegador?
Una vez está todo correctamente instalado abrimos el terminal de comandos para node
Desde ahí, configuramos nuestro directorio con init.
cd ruta-carpeta-proyecto
npm init
Instalamos los módulos npm que vamos a usar en nuestro proyecto. En nuestro caso usaremos la librería repeat-string. Esta librería repite una cadena el número de veces que le indiquemos y para nuestro ejemplo nos viene de fábula.
npm install --save repeat-string
Creamos un archivo javascript que ejecute nuestro código, en mi caso se llama myscript.js
var repeat = require('repeat-string');
console.log(repeat('Hola Mundo\n', 10));
Ahora es cuando se produce la magia. Con la herramienta browserify agrupamos nuestro script con las dependencias y nos devuelve un único archivo: finalScript.js que será el que se ejecute desde el documento html. Esta herramienta es la que nos permite integrar nuestro código javascript en un documento html usando npm.
browserify myscript.js -o finalScript.js
El problema de usar este método es que cada vez que hagamos algún cambio en nuestro script myscript.js, tendremos que volver a ejecutarlo para que las modificaciones surtan efecto. Con la herramienta watchify, podremos replicar los cambios de manera automática.
watchify myscript.js -o finalScript.js
Por último, falta por incluir nuestro script finalScript.js a nuestro documento html
<script src="finalScript.js"></script>
Y con esto ya hemos terminado. Sé que son muchos más pasos para conseguir lo mismo que con los métodos convencionales, pero a la larga es mejor. Solo hay que familiarizarse. De todos modos, siempre puedes contar con la ayuda de un profesional. Si necesitas ayuda, no dudes en ponerte en contacto conmigo.
Happy coding!!