Configurando Webpack para compilar TypeScript

¿Cómo configuramos Webpack para TypeScript?

El proceso de configurar Webpack para que funcione con TypeScript es esencial para proyectos que necesitan integrar estas tecnologías, particularmente cuando se desarrolla un servidor en Node.js. Si bien aún no se ha instalado Express ni configurado tipos específicos, esta clase ofrece un enfoque paso a paso para crear un bundler con Webpack que convierte el código TypeScript a JavaScript entendible por Node.js. ¡Acompáñame mientras caminamos por este interesante proceso!

¿Qué pasos iniciales debemos seguir?

Desde el principio, es crucial conocer que todo lo que implementaremos está en la rama WebpackConfigServer. Si deseas explorar más, puedes usar git checkout y especificar esta rama para acceder a todos los cambios. Antes de ejecutar el servidor de desarrollo, revisa el archivo package.json para ver los scripts disponibles:

• Dev: para un entorno de desarrollo.
• Build: para construir el bundle con Webpack.
• Start: para iniciar un servidor de desarrollo.

Para comenzar, ejecuta yarn start, lo que primero realizará un build de Webpack y luego correrá la aplicación. Asegúrate de tener un archivo .env adecuado copiando y pegando env.example, ya que este define en qué puerto tu servidor se expondrá en producción.

¿Cuál es la configuración esencial de Webpack?

Al configurar Webpack, es importante ajustar algunas configuraciones del entorno. Elimina cualquier servidor de desarrollo innecesario y renombra la configuración de Webpack para el cliente a webpack-config.client.js. Para el servidor, crea un nuevo archivo index.typescript dentro de src/server con un simple console.log('Hola, mundo, desde el server').

Aquí hay un fragmento con los cambios principales de Webpack:

const nodeExternals = require('webpack-node-externals');

module.exports = {
  target: 'node',
  entry: './src/server/index.ts',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
  externals: [nodeExternals()],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

• Target: Cambia a 'node' ya que estamos transpiling para Node.js.
• Entry: Ajusta a src/server/index.typescript.
• Output: Establece el archivo de salida como index.js en la carpeta dist.

¿Cómo configuramos los scripts de desarrollo y producción?

Con los ajustes de Webpack en su lugar, es hora de modificar los scripts en el package.json. Borra los scripts existentes relacionados con la antigua configuración del client-side render y añade:

• build:server: Realiza la construcción del servidor usando Webpack.
• build:dev: Declara un entorno de desarrollo, construye el servidor y luego ejecuta Node en el archivo generado.
• dev: Usa nodemon para monitorear y ejecutar el servidor en modo desarrollo, reejecutando automáticamente cuando se detecten cambios.

Ejemplo de script para build:dev:

"scripts": {
  "build:server": "webpack --config webpack-config-server.js",
  "build:dev": "NODE_ENV=development npm run build:server && node dist/index.js",
  "dev": "nodemon --watch './src/**/*.ts' -e ts --exec 'npm run build:dev'"
}

Utiliza yarn dev para iniciar este proceso y verás el mensaje "Hola mundo" cuando hagas cambios en el archivo index.typescript.

¿Cómo manejamos relatos de desarrollo continuo?

Agregar nodemon como dependencia de desarrollo es crucial, ya que este vigila los cambios en archivos .ts y vuelve a construir y ejecutar el servidor. Esto optimiza el flujo de trabajo al evitar la recompilación manual cada vez que se modifica algo en el código fuente.

¿Qué logros alcanzamos con esta configuración?

Con todo configurado, tienes un entorno adecuado para trabajar con TypeScript y Node. Este entorno no solo permite la transpilación adecuada de TypeScript a JavaScript, sino que también establece una infraestructura sólida para la ejecución y monitoreo del servidor. A medida que avanzamos, exploraremos cómo añadir componentes de servidor adicionales y adentrarnos en el server-side rendering con React.

Sigue adelante, aprender a configurar herramientas robustas es un paso fundamental para cualquier desarrollador, y cada pequeño ajuste que hagas ahora hará que tu entorno de desarrollo sea más eficiente y agradable. ¡Buena suerte y sigue aprendiendo!