7 herramientas que cambian el terreno del desarrollo de JavaScript

Cada año en el mundo de JavaScript parece ser un año abundante. 2021 no es diferente. En particular, la nueva generación de agrupadores y herramientas de construcción está desafiando la inercia existente de ser una herramienta “suficientemente buena”. Este nuevo tipo de herramienta se centra en velocidades más rápidas, mejores entornos de desarrollo y mayor calidad de construcción de producción.

Aquí hay siete herramientas que están emergiendo como nuevas estrellas que facilitan el desarrollo de JavaScript.

Ⓒ Banco de imágenes de Getty

Módulo ECMAScript (ESM)

El módulo ECMAScript, también conocido como módulo ES o ESM, es la sintaxis oficial del módulo JavaScript. Entonces, aunque no es estrictamente una herramienta, tiene un gran impacto en el desarrollo y las herramientas de JavaScript en su conjunto. Ha habido mucha confusión e incertidumbre con respecto al uso de módulos JavaScript (como la sintaxis CommonJS de Node.js). Sin embargo, se están abriendo nuevas posibilidades a través de la reciente aprobación de ESM y la implementación universal en los navegadores.

La forma general de la sintaxis de ESM se puede ver en . La primera línea es la sintaxis para importar la exportación predeterminada. El segundo usa la descomposición de la estructura para especificar miembros dentro del módulo.

Ejemplo 1. Sintaxis de ESM
importar unModule desde ‘nombre-módulo’;
importar {moduleMember, anotherMember} de ‘nombre-módulo’;

Todos los navegadores principales ahora admiten ESM, con soporte para ESM hasta Microsoft Edge. Hay dos formas en que el navegador usa los módulos. Este es un método que se utilizará en el script JavaScript incluido y un método que se utilizará directamente en una etiqueta de script de “módulo” especial, como en el Ejemplo 2.

Ejemplo 2. Importar a través del módulo de secuencia de comandos


Las dos primeras etiquetas de secuencia de comandos del Ejemplo 2 muestran cómo especificar una URL absoluta. En la primera instancia, usamos el atributo src, y en la segunda ejecutamos la búsqueda de JavaScript. La tercera etiqueta de secuencia de comandos muestra importaciones relativas del mismo dominio. Como referencia, las restricciones de CORS se aplican a los scripts de otros dominios.

Durante mucho tiempo, se han utilizado varios paquetes (más recientemente, Webpack) para agrupar scripts para eludir las restricciones relacionadas con el módulo del navegador, pero la situación ha cambiado con un amplio soporte de navegador para ESM, aprovechando el soporte de ESM. Se está desarrollando un nuevo tipo de herramienta.

Sin embargo, todavía hay un papel que debe desempeñar la agrupación. Esto se debe a que si permite que el navegador solicite todos los módulos de su aplicación de forma nativa, el rendimiento puede verse degradado por una gran cantidad de solicitudes. La agrupación, la minificación y la partición de código inteligente / CSS siguen siendo importantes para un buen rendimiento.

Navegadores compatibles con ESM aquíPuedo verlo.

esbuild

esbuild es una herramienta relativamente nueva en el campo de los empaquetadores. Como muchas otras herramientas, su fuerza radica en su velocidad. Está escrito en Go, no en JavaScript, y aprovecha el procesamiento paralelo integrado en Go. También utiliza de forma inteligente la memoria compartida durante el análisis y la generación de código.

Del proyecto Punto de referenciaPuede tener una idea de lo rápido que es esbuild. En el punto de referencia, se encontró que era más de 100 veces mejor que otros paquetes.

De forma predeterminada, esbuild se incluye para navegadores, pero también se puede incluir para Node.js. Funciona de manera similar a otras herramientas de compilación, ya que se conecta a NPM a través de package.json y node_modules. También proporciona una API de JavaScript que puede usar para incorporar el comando de compilación si sus requisitos se vuelven demasiado complejos y difíciles de manejar para usar la línea de comandos.

esbuild se centra en la agrupación y no incluye servidores en modo de desarrollo. Algunas características, como la partición de código / CSS, aún están en desarrollo. Puede utilizar esbuild para funciones de agrupación de producción en otras herramientas (consulte los bytes a continuación).

En mayo de 2021, esbuild tiene alrededor de 25,000 estrellas de GitHub y alrededor de 570,000 descargas de NPM por semana. Es el más pequeño de los proyectos cubiertos aquí, pero su uso está creciendo rápidamente y es una opción atractiva ya que ofrece un rendimiento excelente.

Ejemplo 3. Uso de la API de JavaScript esbuild
require (‘esbuild’). build ({
puntos de entrada: [‘app.jsx’],
paquete: cierto,
outfile: ‘out.js’,
}). catch (() => process.exit (1))

esbuild produce un paquete independiente completo que contiene el código de la aplicación y todas las dependencias. Hay muchos complementos para una variedad de casos de uso, desde Svelte hasta PostCSS y YAML. En su estado predeterminado, esbuild admite formatos comunes como TypeScript, JSX y JSON.

Terreno

Fossil también es una herramienta indispensable, conceptualmente similar a los paquetes web y los paquetes acumulativos (ver más abajo). Además de reducir la sobrecarga de configuración, Fossil también ofrece una gran mejora en el rendimiento, aunque es incomparable con esbuild.

Básicamente, los parsels incluyen segmentación de código no estructurado y reemplazo de módulo en caliente (HMR). Además, básicamente admite muchos tipos de archivos (imágenes, etc.), por lo que se puede procesar sin configuración adicional.


Source: ITWorld Korea by www.itworld.co.kr.

*The article has been translated based on the content of ITWorld Korea by www.itworld.co.kr. If there is any problem regarding the content, copyright, please leave a report below the article. We will try to process as quickly as possible to protect the rights of the author. Thank you very much!

*We just want readers to access information more quickly and easily with other multilingual content, instead of information only available in a certain language.

*We always respect the copyright of the content of the author and always include the original link of the source article.If the author disagrees, just leave the report below the article, the article will be edited or deleted at the request of the author. Thanks very much! Best regards!