No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Configurando Webpack para compilar TypeScript

7/17
Recursos

¿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!

Aportes 10

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Comandos npm:

npm install --save-dev webpack-node-externals

Este comando instalará la última versión de “webpack-node-externals” y lo agregará como una dependencia de desarrollo en su proyecto

npm run build-server
Usé la rama main que no tiene nada hecho al parecer y pude seguir esta clase al pie de la letra. Para quién le sirva.

Si entran en panico como yo, resulta que la nueva rama tien todo escrito tal cual como queda al final de la clase y uno solo debe mirar.
Estonces es mejor tomar nota y repetir el mantra …confia en el proceso!!!

Configurando Webpack para compilar TypeScript

  • Hacer un commit y un push y luego,
  • git pull origin client-side-render
  • git checkout webpack-config-server
  • yarn add webpack-node-externals -D

Este comando instalará la última versión de “webpack-node-externals” y lo agregará como una dependencia de desarrollo en su proyecto

  • npm run build-server
  • yarn add -D nodemon
  • Si usas Windows 10 y te sale un error instala globalmente esta linea de abajo
  • npm install -g win-node-env

package.json:

"scripts": {
    "build-server": "webpack --config webpack.config.server.js",
    "build-dev": "NODE_ENV=development npm runbuild-server && node --inspect dist/index.js",
    "dev": "nodemon --ext ts --exec \"npm run build-dev\" --inspect dist/index.js"
  },
  • Y eso seria todo.

Mi terminal mostraba problemas al momento de ejecutar npm run dev. Lo arregle de la siguiente manera en mi package.json:

"scripts": {
    "build-server": "webpack --config webpack.config.server.js",
    "build-dev": "NODE_ENV=development npm run build-server && node --inspect dist/index.js",
    "dev": "nodemon --ext ts --exec \"npm run build-dev\" --inspect dist/index.js"
  },
Empezar el proyecto con tantos conflictos del package (suele pasar en proyectos reales) pero hay un desorden en los commits, en lo que se muestra y lo que se hace, no creo continuar con el curso hasta que le haga una mejora al curso o se rehaga. :/

Webpack node modules externals

Cuando se empaqueta con Webpack para el backend, generalmente no desea empaquetar sus dependencias de node_modules. Esta biblioteca crea una función externa que ignora node_modules cuando se empaqueta en Webpack.

para los que tiene el error del NODE\_ENV en un entorno windows agregen SET NODE\_ENV:

la verdad q inicio de mierda de curso complicando con configuraciones y lpmqlp…

Ahora si quede super perdido, el profesor tiene otro package.json y todos los comentarios de los alumnos muestran un package.json igual al que tengo yo, pero start no sale por ningun lado!!