JavaScript moderno explicado para dinosaurios

Translation into Spanish of an interesting article by Peter Jang, Dean of Instruction at Actualize Coding Bootcamp., software engineer, coder, educator and writer.

JavaScripttranslation into spanishtutorial
19 May, 2022 Modern JavaScript explained for dinosaurs
19 May, 2022 Modern JavaScript explained for dinosaurs

A free MT translation by DeepL postedited by Chema, a Spain-based translation student specializing in English to Spanish translations

An original text written by Peter Jang, originally published in
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

* * *

Aprender JavaScript moderno es difícil si no tienes una base. El ecosistema crece y cambia tan rápidamente que es difícil entender los problemas que las diferentes herramientas intentan resolver. Comencé a programar en 1998, pero solo comencé a aprender JavaScript en serio en 2014. En ese momento, recuerdo haberme encontrado con Browserify y leer su lema:

“Browserify permite llamar (‘módulos’) desde el navegador al agrupar todas sus dependencias”.

Prácticamente no entendí ni una sola palabra de esa frase, y me estrujé los sesos para entender hasta qué punto esto podría ser útil para mí como desarrollador.

El objetivo de este artículo es proporcionar un contexto histórico de cómo las herramientas de JavaScript han evolucionado a lo que son hoy en 2017. Comenzaremos desde el principio y crearemos un sitio web de ejemplo como lo hicieron los dinosaurios: sin herramientas, solo HTML y JavaScript. Luego, presentaremos diferentes herramientas de forma incremental para ver los problemas que resuelven uno a uno. Con este contexto histórico, podrás aprender y adaptarse mejor al panorama de JavaScript en constante cambio en el futuro. ¡Empecemos!

Actualización : Hice una versión en video de este artículo, explicando cada parte paso a paso para mayor claridad. Échale un vistazo aquí:
https://firstclass.actualize.co/p/modern-javascript-explained-for -dinosaurios

Usar JavaScript a la “vieja usanza”

Comencemos con un sitio web a la “vieja usanza” usando HTML y JavaScript, lo que implica descargar y vincular archivos manualmente. Aquí hay un archivo simple index.html vinculado a un archivo JavaScript:

<!-- index.html --> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Ejemplo de JavaScript</title> 
  <script src=" index.js"></script>
 </head> 
<body> 
  <h1>¡Hola desde HTML!</h1> 
</body> 
</html>

La línea <script src="index.js"></script>hace referencia a un archivo JavaScript ubicado en el mismo directorio llamado index.js:

// index.js 
console.log("¡Hola desde JavaScript!");

¡Esto es todo lo que necesitas para hacer un sitio web! Ahora supongamos que desea agregar una biblioteca que alguien más escribió como moment.js (una biblioteca que puede ayudar a formatear las fechas de una manera legible por humanos). Por ejemplo, puedes usar la función moment en JavaScript de la siguiente manera:

moment().startOf('día').fromNow(); // hace 20 horas

¡Esto solo supone incluir moment.js en tu sitio web! En la página de inicio de moment.js tienes las instrucciones:

Hmm, hay muchas cosas en la sección Instalar (a la derecha). Pero ignoremos eso por ahora: podemos agregar moment.js a nuestro sitio web descargando el archivo moment.min.jsen el mismo directorio e incluyéndolo en nuestro archivo index.html.

<!-- index.html --> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Ejemplo</title> 
  <link rel="hoja de estilo " href="index.css"> 
  <script src="moment.min.js"></script>
   <script src="index.js"></script> 
</head> 
<body> 
  <h1>Hola de HTML!</h1> 
</body> 
</html>

Ten en cuenta que moment.min.js se carga antes que index.js, lo que significa que puedes usar la función moment de index.js de la siguiente manera:

// index.js 
console.log("¡Hola desde JavaScript!"); 
console.log(moment().startOf('día').fromNow());

¡Y así es como solíamos hacer sitios web con bibliotecas de JavaScript! Lo bueno era que era bastante fácil de entender. Lo malo era que era molesto encontrar y descargar nuevas versiones de bibliotecas cada vez que se actualizaban.

Usando un administrador de paquetes de JavaScript (npm)

A partir de 2010, surgieron varios gestores de paquetes de JavaScript para ayudar a automatizar el proceso de descarga y actualización de bibliotecas desde un repositorio central. Podría decirse que Bower fue el más popular en 2013, pero finalmente fue superado por npm alrededor de 2015. (Vale la pena señalar que, a partir de finales de 2016, yarn ha ganado mucha tracción como alternativa a la interfaz de npm, pero en realidad usa paquetes npm bajo el capó)

Ten en cuenta que npm fue originalmente un gestor de paquetes creado específicamente para node.js , un entorno de ejecución multiplataforma de JavaScript diseñado para ejecutarse en el servidor, no en la interfaz. Eso lo convierte en una opción bastante extraña para un gestor de paquetes JavaScript frontend para bibliotecas destinadas a ejecutarse en un navegador.

Nota : el uso de gestores de paquetes generalmente implica el uso de una línea de comando, que en el pasado nunca se requería como desarrollador de interfaz. Si nunca la has usado, lee este tutorial para obtener una buena descripción general para comenzar. Para bien o para mal, saber cómo usar la línea de comandos es una parte importante del JavaScript moderno (y también abre puertas a otras áreas de desarrollo).

Veamos cómo usar npm para instalar el paquete moment.js automáticamente en lugar de descargarlo manualmente. Si tienes node.js instalado, puedes ir a tu línea de comandos, a la carpeta donde esté el archivoindex.html y escribir:

$ npm inicio

Esto generará varias preguntas (los valores predeterminados están bien, puedes presionar “Entrar” para cada pregunta) y generar un nuevo archivo llamado package.json. Este es un archivo de configuración que npm usa para guardar toda la información del proyecto. Con los valores predeterminados, el contenido de package.json debería ser algo así como:

{ 
  "name": "your-project-name", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { 
    "test": " echo \"Error: no se especificó ninguna prueba\" && exit 1" 
  }, 
  "autor": "", 
  "licencia": "ISC" 
}

Para instalar el paquete de JavaScript moment.js, podemos seguir las instrucciones de npm desde la página de inicio escribiendo en la línea de comandos:

$ npm install moment --save

Este comando hace dos cosas: primero, descarga todo el código del paquete moment.js en una carpeta llamada node_modules. En segundo lugar, modifica automáticamente el package.json archivo para realizar un seguimiento de moment.js como una dependencia del proyecto.

{ 
  "name": "modern-javascript-example", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { 
    "test": " echo \"Error: no se especificó ninguna prueba\" && exit 1" 
  }, 
  "autor": "", 
  "licencia": "ISC", 
  "dependencias": { 
    "momento": "^2.22.2" 
  }
 }

Esto es útil más adelante al compartir un proyecto con otros: en lugar de compartir la node_modulescarpeta (que puede llegar a ser muy grande), solo necesita compartir el package.jsonarchivo y otros desarrolladores pueden instalar los paquetes requeridos automáticamente con el comando npm install.

Así que ahora ya no tenemos que descargar manualmente moment.js del sitio web, podemos descargarlo y actualizarlo automáticamente usando npm. Mirando dentro de la node_modulescarpeta, podemos ver el moment.min.jsarchivo en el node_modules/moment/mindirectorio. Esto significa que podemos vincular a la versión descargada de npm moment.min.jsen el index.htmlarchivo de la siguiente manera:

<!-- index.html --> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Ejemplo de JavaScript</title> 
  <script src=" node_modules/moment/min/moment.min.js"></script>
   <script src="index.js"></script> 
</head> 
<body> 
  <h1>¡Hola desde HTML!</h1> 
< /cuerpo> 
</html>

Entonces, lo bueno es que ahora podemos usar npm para descargar y actualizar nuestros paquetes a través de la línea de comandos. Lo malo es que en este momento estamos buscando en la node_modules carpeta para encontrar la ubicación de cada paquete e incluyéndolo manualmente en nuestro HTML. Eso es bastante inconveniente, así que a continuación veremos cómo automatizar ese proceso también.

Uso de un paquete de módulos de JavaScript (paquete web)

La mayoría de los lenguajes de programación proporcionan una forma de importar código de un archivo a otro. JavaScript no se diseñó originalmente con esta función, porque JavaScript se diseñó para ejecutarse solo en el navegador, sin acceso al sistema de archivos de la computadora del cliente (por razones de seguridad). Durante mucho tiempo, organizar el código JavaScript en varios archivos requería cargar cada archivo con variables compartidas globalmente.

En realidad, esto es lo que estamos haciendo con el ejemplo anterior de moment.js: el archivo complet moment.min.js se carga en el HTML, define una variable global moment, que luego está disponible para cualquier archivo cargado después moment.min.js (independientemente de si necesita o no acceso).

En 2009, se inició un proyecto llamado CommonJS con el objetivo de especificar un ecosistema para JavaScript fuera del navegador. Una gran parte de CommonJS fue su especificación para módulos, lo que finalmente permitiría que JavaScript importe y exporte código a través de archivos como la mayoría de los lenguajes de programación, sin recurrir a variables globales. La implementación más conocida de módulos CommonJS es node.js.

Como se mencionó anteriormente, node.js es un entorno de ejecución de JavaScript diseñado para ejecutarse en el servidor. Así es como se vería el ejemplo anterior usando módulos node.js. En lugar de cargar todo moment.min.jscon una etiqueta de secuencia de comandos HTML, puedes cargarlo directamente en el archivo JavaScript de la siguiente manera:

// index.js 
var momento = require('momento');console.log("¡Hola desde JavaScript!"); 
console.log(momento().startOf('día').fromNow());

Nuevamente, así es como funciona la carga de módulos en node.js, que funciona muy bien ya que node.js es un lenguaje del lado del servidor con acceso al sistema de archivos del ordenador. Node.js también conoce la ubicación de la ruta de cada módulo npm, por lo que en lugar de tener que escribir require('./node_modules/moment/min/moment.min.js), simplemente puedes escribir require('moment'), mucho mejor!

Todo esto es genial para node.js, pero si intentaras usar el código anterior en el navegador, obtendrísa un error diciendo que require no está definido. El navegador no tiene acceso al sistema de archivos, lo que significa que cargar módulos de esta manera es muy complicado: la carga de archivos debe hacerse dinámicamente, ya sea de forma sincrona (lo que ralentiza la ejecución) o asíncrona (lo que puede tener problemas de tiempo).

Aquí es donde entra en juego un paquete de módulos. Un paquete de módulos de JavaScript es una herramienta que soluciona el problema con un paso de compilación (que tiene acceso al sistema de archivos) para crear un resultado final compatible con el navegador (que no necesita acceso al sistema de archivos). En este caso, necesitamos un paquete de módulos para encontrar todas las requiredeclaraciones (que es una sintaxis de JavaScript del navegador no válida) y reemplazarlas con el contenido real de cada archivo requerido. ¡El resultado final es un único archivo JavaScript incluido (sin instrucciones requeridas)!

El paquete de módulos más popular fue Browserify , que se lanzó en 2011 y fue pionero en el uso del estilo de node.js requiere declaraciones en la interfaz (que es esencialmente lo que permitió que npm se convirtiera en el administrador de paquetes de interfaz elegido). Alrededor de 2015, webpack finalmente se convirtió en el paquete de módulos más utilizado (impulsado por la popularidad del marco de frontend React , que aprovechó al máximo las diversas características de webpack).

Echemos un vistazo a cómo usar el paquete web para que el require('moment')ejemplo anterior funcione en el navegador. Primero necesitamos instalar webpack en el proyecto. Webpack en sí es un paquete npm, por lo que podemos instalarlo desde la línea de comandos:

$ npm instalar paquete web paquete web-cli --save-dev

Ten en cuenta que estamos instalando dos paquetes: webpack y webpack-cli (que te permitirá usar webpack desde la línea de comandos). También tena en cuenta --save-dev: esto lo guarda como una dependencia de desarrollo, lo que significa que es un paquete que necesitas en tu entorno de desarrollo pero no en tu servidor de producción. Puedes ver esto reflejado en package.json, que se actualizó automáticamente:

{ 
  "name": "modern-javascript-example", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { 
    "test": " echo \"Error: no se especificó ninguna prueba\" && exit 1" 
  }, 
  "author": "", 
  "license": "ISC", 
  "dependencies": { 
    "moment": "^2.19.1" 
  }, 
  "devDependencies ": { 
    "paquete web": "^4.17.1", 
    "paquete web-cli": "^3.1.0" 
  }
 }

Ahora tenemos webpack y webpack-cli instalados como paquetes en la carpeta node_modules. Puedes usar webpack-cli desde la línea de comandos de la siguiente manera:

$ ./node_modules/.bin/webpack index.js --mode=desarrollo

Este comando ejecutará la herramienta webpack que se instaló en la carpeta node_modules, comenzará con el archivo index.js, buscará las declaraciones require y las reemplazará con el código apropiado para crear un único archivo de salida (que de forma predeterminada es dist/main.js). Al usar --mode=development mantenemos JavaScript legible para los desarrolladores, a diferencia del output minimizado que se generaría usando --mode=production.

Ahora que tenemos el paquete web dist/main.js, lo usaremos en lugar de index.js, ya que contiene declaraciones de requisitos no válidas. Esto se reflejaría en el archivo index.html de la siguiente manera:

<!-- index.html --> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Ejemplo de JavaScript</title> 
  <script src=" dist/main.js"></script>
 </head> 
<body> 
  <h1>¡Hola desde HTML!</h1> 
</body> 
</html>

Si actualizs el navegador, deberías ver que todo funciona como antes.

Ten en cuenta que necesitaremos ejecutar el comando webpack cada vez que cambiemos index.js. Esto es tedioso y será aún más tedioso a medida que usemos las características más avanzadas de webpack (como generar mapas de origen para ayudar a depurar el código original a partir del código transpilado). Webpack puede leer opciones de un archivo de configuración en el directorio raíz del proyecto denominado webpack.config.js, que en nuestro caso se vería así:

// webpack.config.js 
module.exports = { 
  modo: 'desarrollo', 
  entrada: './index.js', 
  salida: { 
    nombre de archivo: 'main.js', 
    publicPath: 'dist' 
  } 
};

Ahora, cada vez que cambiamos index.js, podemos ejecutar webpack con el comando:

$ ./node_modules/.bin/paquete web

Ya no necesitamos especificar las opciones index.jsy --mode=development, ya que webpack está cargando esas opciones desde el archivo webpack.config.js. Esto es mejor, pero aún es tedioso ingresar este comando para cada cambio de código; haremos que este proceso sea más fluido en un momento.

En general, esto puede no parecer gran cosa, pero hay algunas ventajas enormes en este flujo de trabajo. Ya no estamos cargando scripts externos a través de variables globales. Todas las nuevas bibliotecas de JavaScript se agregarán utilizando declaraciones require en JavaScript, en lugar de agregar nuevas etiquetas <script>en HTML. Tener un solo archivo de paquete de JavaScript suele ser mejor para el rendimiento. Y ahora que agregamos un paso de compilación, ¡hay algunas otras características potentes que podemos agregar a nuestro flujo de trabajo de desarrollo!

Código de transpilación para nuevas características del lenguaje (babel)

Transpilar código significa traducir código de un lenguaje a otro
lenguaje similar. Esta es una parte importante del desarrollo de la interfaz de usuario: dado que los navegadores tardan en agregar nuevas funciones, se crearon nuevos lenguajes con funciones experimentales que se traducen en lenguajes compatibles con el navegador.

Para CSS están Sass, Less y Stylus, por nombrar algunos. Para JavaScript, el transpilador más popular durante un tiempo fue CoffeeScript (lanzado alrededor de 2010), mientras que hoy en día la mayoría de la gente usa babel o TypeScript. CoffeeScript es un lenguaje enfocado en mejorar JavaScript cambiando significativamente el idioma: paréntesis opcionales, espacios en blanco significativos, etc. Babel no es un lenguaje nuevo, sino un transpilador que transpila JavaScript de última generación con características que aún no están disponibles para todos los navegadores (ES2015 y más allá) a JavaScript más antiguo y compatible (ES5). Typescript es un lenguaje que es esencialmente idéntico al JavaScript de próxima generación, pero también agrega escritura estática opcional. Muchas personas optan por usar babel porque es lo más parecido a JavaScript estándar.

Veamos un ejemplo de cómo usar babel con nuestro paso de compilación de paquete web existente. Primero instalaremos babel (que es un paquete npm) en el proyecto desde la línea de comando:

$ npm install @babel/core @babel/preset-env babel-loader --save-dev

Tenga en cuenta que estamos instalando 3 paquetes separados como dependencias de desarrollo: @babel/corees la parte principal de babel, @babel/preset-enves un ajuste preestablecido que define qué nuevas funciones de JavaScript transpilar y babel-loaderes un paquete para permitir que babel funcione con webpack. Podemos configurar webpack para usar babel-loadereditando el archivo webpack.config.jsde la siguiente manera:

// webpack.config.js 
module.exports = { 
  modo: 'desarrollo', 
  entrada: './index.js', 
  salida: { 
    nombre de archivo: 'main.js', 
    publicPath: 'dist' 
  }, 
  módulo: { 
    reglas : [ 
      { 
        prueba: /\.js$/, 
        excluir: /node_modules/, 
        use: { 
          cargador: 'babel-loader', 
          opciones: { 
            ajustes preestablecidos: ['@babel/preset-env'] 
          } 
        } 
      } 
    ] 
  }
 } ;

Esta sintaxis puede ser confusa (afortunadamente no es algo que editaremos con frecuencia). Básicamente, le estamos diciendo a webpack que busque cualquier archivo .js (excluyendo los que están en la carpeta node_modules) y aplique la transpilación de babel usando babel-loaderel ajuste preeestablecido @babel/preset-env. Puede leer más sobre la sintaxis de configuración del paquete web aquí .

Ahora que todo está configurado, ¡podemos comenzar a escribir funciones de ES2015 en nuestro JavaScript! Aquí hay un ejemplo de una cadena de plantilla ES2015 en el archivo index.js:

// index.js 
var momento = require('momento');console.log("¡Hola desde JavaScript!"); 
console.log(momento().startOf('día').fromNow());var nombre = "Bob", hora = "hoy"; 
console.log(`Hola ${nombre}, ¿cómo estás ${hora}?`);

También podemos usar la instrucción de importación ES2015 en lugar de requirepara cargar módulos, que es lo que verá en muchas bases de código hoy:

// index.js 
importa el momento desde 'momento';console.log("¡Hola desde JavaScript!"); 
console.log(momento().startOf('día').fromNow());var nombre = "Bob", hora = "hoy"; 
console.log(`Hola ${nombre}, ¿cómo estás ${hora}?`);

En este ejemplo, la sintaxis import no es muy diferente de la sintaxis require, pero importtiene flexibilidad adicional para casos más avanzados. Como cambiamos index.js, necesitamos ejecutar webpack nuevamente en la línea de comando:

$ ./node_modules/.bin/paquete web

Ahora puedes actualizar index.htmlen el navegador. En el momento de escribir este artículo, la mayoría de los navegadores modernos son compatibles con todas las funciones de ES2015, por lo que puede ser difícil saber si babel hizo su trabajo. Puedes probarlo en un navegador más antiguo como IE9, o puedes buscar main.jspara encontrar la línea de código transpilado:

// main.js 
// ... 
console.log('Hola ' + nombre + ', ¿cómo estás ' + hora + '?'); 
// ...

Aquí puedes ver que Babel transpiló la cadena de la plantilla ES2015 en una concatenación de cadenas de JavaScript regular para mantener la compatibilidad del navegador. Si bien este ejemplo en particular puede no ser demasiado emocionante, la capacidad de transpilar código es muy poderosa. Hay algunas funciones de lenguaje emocionantes que llegan a JavaScript, como async/await, que puede comenzar a usar hoy para escribir un mejor código. Y aunque la transpilación a veces puede parecer tediosa y dolorosa, ha llevado a una mejora espectacular del idioma en los últimos años, ya que la gente está probando hoy las características del mañana.

Ya casi terminamos, pero aún quedan algunos bordes sin pulir en nuestro flujo de trabajo. Si nos preocupa el rendimiento, deberíamos minimizar el archivo del paquete, lo que debería ser bastante fácil dado que ya estamos incorporando un paso de compilación. También necesitamos volver a ejecutar el comando webpack cada vez que cambiamos el JavaScript, que envejece muy rápido. Lo siguiente que veremos son algunas herramientas útiles para resolver estos problemas.

Uso de un ejecutor de tareas (scripts npm)

Ahora que estamos interesados ​​en usar un paso de compilación para trabajar con módulos de JavaScript, tiene sentido usar un ejecutor de tareas, que es una herramienta que automatiza diferentes partes del proceso de compilación. Para el desarrollo frontend, las tareas incluyen la minimización de código, la optimización de imágenes, la ejecución de pruebas, etc.

En 2013, Grunt fue el ejecutor de tareas frontend más popular, y Gulp lo siguió poco después. Ambos se basan en complementos que envuelven otras herramientas de línea de comandos. Hoy en día, la opción más popular parece ser el uso de las capacidades de secuencias de comandos integradas en el administrador de paquetes npm, que no usa complementos, sino que funciona directamente con otras herramientas de línea de comandos.

Escribamos algunos scripts npm para facilitar el uso de webpack. Esto implica simplemente cambiar el archivo package.json de la siguiente manera:

{ 
  "name": "modern-javascript-example", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { 
    "test": " echo \"Error: no se especificó ninguna prueba\" && exit 1", 
    "build": "webpack --progress --mode=producción", 
    "watch": "webpack --progress --watch"
   }, 
  "author": "", 
  "licencia": "ISC", 
  "dependencias": { 
    "momento": "^2.22.2" 
  }, 
  "devDependencies": { 
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0", 
    "babel-loader": "^8.0.2", 
    "webpack": "^4.17.1", 
    "webpack-cli": "^3.1. 0" 
  } 
}

Aquí hemos agregado dos nuevos scripts buildy watch. Para ejecutar el script de compilación, puedes ingresar en la línea de comando:

$ npm run build

Esto ejecutará el paquete web (usando la configuración webpack.config.jsque hicimos anteriormente) con la opción --progress de mostrar el porcentaje de progreso y la opción --mode=productionde minimizar el código para la producción. Para ejecutar el script watchescribimos:

$ npm run watch

Esto usa la opción --watch para volver a ejecutar automáticamente el paquete web cada vez que cambia cualquier archivo JavaScript, lo cual es excelente para el desarrollo.

Ten en cuenta que los scripts package.jsonpueden ejecutar webpack sin tener que especificar la ruta completa ./node_modules/.bin/webpack, ya que node.js conoce la ubicación de cada ruta de módulo npm. ¡Esto es bastante dulce! Podemos hacer las cosas aún más dulces instalando webpack-dev-server, una herramienta separada que proporciona un servidor web simple con recarga en vivo. Para instalarlo como una dependencia de desarrollo, ingrese el comando:

$ npm install webpack-dev-servidor --save-dev

Luego agrega un script npm a package.json:

{ 
  "name": "modern-javascript-example", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { 
    "test": " echo \"Error: no se especificó ninguna prueba\" && exit 1", 
    "build": "webpack --progress -p", 
    "watch": "webpack --progress --watch", 
    "server": "webpack-dev -server --open"
   }, 
  "author": "", 
  "license": "ISC", 
  "dependencies": { 
    "moment": "^2.19.1" 
  }, 
  "devDependencies":{ 
    "@babel/core": "^7.0.0", 
    "@babel/preset-env": "^7.0.0", 
    "babel-loader": "^8.0.2", 
    "webpack": "^ 3.7.1", 
    "webpack-dev-servidor": "^3.1.6" 
  } 
}

Ahora puedes iniciar tu servidor de desarrollo ejecutando el comando:

$ npm run servidor

Esto abrirá automáticamente el sitio web index.html en tu navegador con una dirección localhost:8080(por defecto). Cada vez que cambies tu JavaScript en index.js, webpack-dev-server reconstruirá su propio JavaScript incluido y actualizará el navegador automáticamente. Esto supone un ahorro de tiempo sorprendentemente útil, ya que te permite concentrarte en el código en lugar de tener que cambiar continuamente los contextos entre el código y el navegador para ver nuevos cambios.

Esto es solo rascar la superficie, hay muchas más opciones tanto con webpack como con webpack-dev-server (sobre las que puede leer aquí ). Por supuesto, también puedes crear scripts npm para ejecutar otras tareas, como convertir Sass a CSS, comprimir imágenes, ejecutar pruebas: cualquier cosa que tenga una herramienta de línea de comandos es un juego justo. También hay excelentes opciones y trucos avanzados con los propios scripts de npm: esta charla de Kate Hudson es un excelente lugar para comenzar:

Conclusión

Esto es JavaScript moderno en pocas palabras. Pasamos de HTML simple y JS a usar un gestor de paquetes para descargar automáticamente paquetes de terceros, un paquete de módulos para crear un solo archivo de secuencia de comandos, un transpilador para usar futuras funciones de JavaScript y un ejecutor de tareas para automatizar diferentes partes del proceso de compilación. Definitivamente muchas piezas en movimiento aquí, especialmente para principiantes. El desarrollo web solía ser un gran punto de entrada para las personas nuevas en la programación precisamente porque era muy fácil de poner en marcha; hoy en día puede ser bastante desalentador, especialmente porque las diversas herramientas tienden a cambiar rápidamente.

Aún así, no es tan malo como parece. Las cosas se están calmando, particularmente con la adopción del ecosistema de nodos como una forma viable de trabajar con la interfaz. Es bueno y coherente usar npm como administrador de paquetes, nodo requireo importdeclaraciones para módulos y scripts de npm para ejecutar tareas. ¡Este es un flujo de trabajo muy simplificado en comparación con hace uno o dos años!

Incluso mejor para principiantes y desarrolladores experimentados es que los marcos en estos días a menudo vienen con herramientas para facilitar el proceso de inicio. Ember tiene ember-cli, que tuvo una gran influencia en Angular angular-cli, React create-react-app, Vue vue-cli, etc. Todas estas herramientas configurarán un proyecto con todo lo que necesita; todo lo que necesita hacer es comenzar a escribir código. Sin embargo, estas herramientas no son mágicas, simplemente configuran todo de manera consistente y funcional; a menudo puede llegar a un punto en el que necesita realizar una configuración adicional con webpack, babel, etc. Por lo tanto, aún es muy importante comprender lo que hace cada pieza como hemos cubierto en este artículo.

Trabajar con JavaScript moderno definitivamente puede ser frustrante, ya que continúa cambiando y evolucionando a un ritmo rápido. Pero aunque a veces parezca reinventar la rueda, la rápida evolución de JavaScript ha ayudado a impulsar innovaciones como la recarga en caliente, el linting en tiempo real y la depuración de viajes en el tiempo. Es un momento emocionante para ser desarrollador y espero que esta información pueda servir como guía para ayudarte en su viaje.

Un agradecimiento especial a Dinosaur Comics de @ryanqnorth, creador de algunos de las mejores viñetas de humnor absurdo desde 2003 (cuando los dinosaurios dominaban la web).

Valora este artículo
Web · Blog · Edu · Legal © Ibidem Group Ltd. 2024