Al iniciar un nuevo proyecto web en el que se utilizará JavaScript, a menudo lo primero que hacemos es configurar las herramientas de desarrollo y de compilación. Por ejemplo, Vite, que es popular hoy en día. Es posible que no sepa que no se necesitan herramientas de compilación complicadas para todos los proyectos de JavaScript (web). De hecho, ahora es más fácil que nunca prescindir de él, como mostraré en este artículo.

Crea un nuevo proyecto con un archivo index.html.

  
  
  
    
Hello world
  

Si está utilizando VS Code, instale la extensión Live Preview. Ejecutarlo. Este es un servidor de archivos simple con recarga en vivo. Puedes usar cualquier servidor de archivos, Python viene con uno integrado:

python3 -m http.server

Me gusta la Vista previa en vivo porque actualiza automáticamente la página después de realizar cambios en un archivo.

Ahora deberías poder acceder a tu archivo index.html desde el navegador y ver "Hola mundo".

A continuación, cree un archivo index.js:

console.log("Hello world");

export {};

Inclúyelo en tu index.html:

Abre la consola de desarrollador en tu navegador. Si ves "Hola mundo", sabrás que se está cargando correctamente.

Los navegadores ahora admiten módulos ECMAScript. Puedes importar otros archivos por sus efectos secundarios:

import "./some-other-script.js";

o para sus exportaciones

import { add, multiply } "./my-math-lib.js";

Muy bien, ¿verdad? Consulte la guía de MDN anterior para obtener más información.

Paquetes

Probablemente no quieras reinventar la rueda, por lo que tu proyecto probablemente utilizará algunos paquetes de terceros. Eso no significa que ahora debas comenzar a usar un administrador de paquetes.

Supongamos que queremos usar superstruct para la validación de datos. No podemos simplemente cargar módulos desde nuestro propio servidor de archivos (local), sino desde cualquier URL. esm.sh proporciona convenientemente módulos para casi todos los paquetes disponibles en npm.

Cuando visitas https://esm.sh/superstruct puedes ver que eres redirigido a la última versión. Puede incluir este paquete de la siguiente manera en su código:

import { assert } from "https://esm.sh/superstruct";

Si quieres estar seguro, puedes fijar versiones.

Tipos

No sé ustedes, pero TypeScript me mimó (y me volvió perezoso). Escribir JavaScript simple sin la ayuda del verificador de tipos es como escribir sobre la cuerda floja. Afortunadamente, tampoco tenemos que renunciar a la verificación de tipos.

Es hora de eliminar npm (aunque no enviaremos ningún código que proporcione).

npm init --yes
npm install typescript

¡Puedes usar el compilador TypeScript en código JavaScript sin problemas! Para ello existe un soporte de primera clase. Crear un jsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "checkJs": true,
    "allowJs": true,
    "noImplicitAny": true,
    "lib": ["ES2022", "DOM"],
    "module": "ES2022",
    "target": "ES2022"
  },
  "include": ["**/*.js"],
  "exclude": ["node_modules"]
}

Ahora ejecuta

npm run tsc --watch -p jsconfig.json

y comete un error de tipo en tu código. El compilador de TypeScript debería quejarse:

/** @type {number} **/
const num = "hello";

Por cierto, el comentario que ves arriba es JSDoc. Puede anotar su JavaScript con tipos de esta manera. Si bien es un poco más detallado que usar TypeScript, te acostumbras bastante rápido. También es muy poderoso, siempre y cuando no escribas tipos locos (lo cual no deberías hacer en la mayoría de los proyectos), todo estará bien.

Si necesita un tipo complicado (ayudante), siempre puede agregar algo de TypeScript en un archivo .d.ts.

¿JSDoc es solo un trampolín para que las personas atrapadas en grandes proyectos de JavaScript puedan migrar gradualmente a TypeScript? ¡No me parece! El equipo de TypeScript también continúa agregando excelentes funciones a JSDoc TypeScript, como en la próxima versión de TypeScript. La función de autocompletar también funciona muy bien en VS Code.

Importar mapas

Aprendimos cómo agregar paquetes externos a nuestro proyecto sin una herramienta de compilación. Sin embargo, si divides tu código en muchos módulos, escribir la URL completa una y otra vez puede resultar un poco detallado.

Podemos agregar un mapa de importación a la sección principal de nuestro index.html:

Ahora podemos simplemente importar este paquete con

import {} from "superstruct"

Como un proyecto 'normal'. Otro beneficio es que la finalización y el reconocimiento de tipos funcionarán como se espera si instala el paquete localmente.

npm install --save-dev superstruct

Tenga en cuenta que la versión en su directorio node_modules no será utilizada. Puedes eliminarlo y tu proyecto seguirá ejecutándose.

Un truco que me gusta usar es agregar:

      "cdn/": "https://esm.sh/",

A mi mapa de importación. Luego, cualquier proyecto disponible a través de esm.sh se puede utilizar simplemente importándolo. P.ej.:

import Peer from "cdn/peerjs";

Si también desea extraer tipos de node_modules para el desarrollo de este tipo de importación, debe agregar lo siguiente a las opciones del compilador de su jsconfig.json:

    "paths": {
      "cdn/*": ["./node_modules/*", "./node_modules/@types/*"]
    },

Despliegue

Para implementar su proyecto, copie todos los archivos a un host de archivos estático y ¡listo! Si alguna vez ha trabajado en un proyecto JavaScript heredado, conoce la dificultad de actualizar herramientas de compilación que no tienen ni siquiera 1 o 2 años. No correrás la misma suerte con la configuración de este proyecto.

Pruebas

Si su JavaScript no depende de las API del navegador, puede usar el ejecutor de pruebas que viene incluido con Node.js. Pero, ¿por qué no escribir tu propio ejecutor de pruebas que se ejecute directamente en el navegador?

/** @type {[string, () => Promise | void][]} */
const tests = [];

/**
 *
 * @param {string} description
 * @param {() => Promise | void} testFunc
 */
export async function test(description, testFunc) {
  tests.push([description, testFunc]);
}

export async function runAllTests() {
  const main = document.querySelector("main");
  if (!(main instanceof HTMLElement)) throw new Error();
  main.innerHTML = "";

  for (const [description, testFunc] of tests) {
    const newSpan = document.createElement("p");

    try {
      await testFunc();
      newSpan.textContent = `✅ ${description}`;
    } catch (err) {
      const errorMessage =
        err instanceof Error && err.message ? ` - ${err.message}` : "";
      newSpan.textContent = `❌ ${description}${errorMessage}`;
    }
    main.appendChild(newSpan);
  }
}

/**
 * @param {any} val
 */
export function assert(val, message = "") {
  if (!val) throw new Error(message);
}

Ahora crea un archivo ejemplo.test.js.

import { test, assert } from "@/test.js";

test("1 1", () => {
  assert(1   1 === 2);
});

Y un archivo donde importas todas tus pruebas:

import "./example.test.js";

console.log("This should only show up when running tests");

Ejecutar esto al cargar la página:

await import("@/test/index.js"); // file that imports all tests
(await import("@/test.js")).runAllTests();

Y obtuviste una configuración TDD perfecta. Para ejecutar solo una sección de las pruebas, puede comentar algunas importaciones de .test.js, pero la velocidad de ejecución de las pruebas solo debería comenzar a convertirse en un problema cuando haya acumulado muchas pruebas.

Beneficios

¿Por qué harías esto? Bueno, usar menos capas de abstracción hace que tu proyecto sea más fácil de depurar. También existe el lema de "utilizar la plataforma". Las habilidades que aprenda se transferirán mejor a otros proyectos. Otra ventaja es que, cuando regreses a un proyecto construido como este en 10 años, seguirá funcionando y no necesitarás hacer arqueología para intentar revivir una herramienta de construcción que ha estado inactiva durante 8 años. Una experiencia con la que estarán familiarizados muchos desarrolladores web que trabajaron en proyectos antiguos.

Consulta Plainvanillaweb.com para obtener más ideas.