Babel, Webpack y NPM – Reaccionar el movimiento vernáculo 07

Babel, Webpack y NPM – Reaccionar el movimiento vernáculo 07

Prefacio

Este artículo brindará algunas explicaciones sobre tres términos. Estos términos son las herramientas que necesita saber para construir un proyecto React, que incluyen:

  1. ¿Qué es Babel?
  2. ¿Qué es el paquete web?
  3. ¿Qué es la NPM?

Por supuesto, la introducción principal es el concepto de uso de estas herramientas, pero todavía hay otras herramientas para elegir, como Npm to Yarn.

¿Qué es Babel?

El artículo anterior mencionó que JSX debe compilarse mediante herramientas, y los artículos anteriores de esta serie también mencionaron la sintaxis de JavaScript ES6.

De hecho, en algunos casos, ES6 también debe compilarse y se utiliza la suite Babel para la compilación (compilar).

Primero expliquemos que el lenguaje JavaScript en sí es un lenguaje de programación literal y el navegador puede ejecutar la sintaxis del programa en su interior sin compilarlo.

Sin embargo, no todos los navegadores admiten la sintaxis más reciente, por lo que utilizamos herramientas como Babel.

Convierta la sintaxis más reciente, incluida la sintaxis de ES6 y JSX, a la versión anterior de la sintaxis de JavaScript antes de que el navegador pueda ejecutarla.

Desde una perspectiva de desarrollo front-end, Babel es una herramienta indispensable. Su función principal es convertir la última versión de la sintaxis de JavaScript, especialmente la sintaxis de ECMAScript 6 (ES6), en una versión anterior de JavaScript que el navegador pueda comprender y ejecutar.

ES6 introduce muchas características poderosas, como funciones de flecha, cadenas de plantilla, asignación de desestructuración, etc. Sin embargo, debido a los diferentes niveles de soporte del navegador, para garantizar la compatibilidad entre navegadores, necesitamos usar Babel para la compilación.

Además, al desarrollar aplicaciones React utilizando la sintaxis JSX, también se requiere Babel para la compilación. JSX es una extensión de sintaxis de JavaScript que se utiliza para describir la estructura de los componentes de React. Permite escribir marcas similares a HTML en JavaScript, pero los navegadores no pueden ejecutar directamente la sintaxis JSX, por lo que se requiere que Babel la convierta en JavaScript puro.

¿Qué es el paquete web?

Después de explicar la herramienta de compilación Babel, también debemos explicar una herramienta de empaquetado modular llamada "Webpack".

Puedes imaginar que hay muchos tipos de archivos en un proyecto grande, además de JavaScript, puede haber diferentes tipos de archivos, como CSS, LESS, SCSS, JSX... etc.

Estos archivos dispersos en varias carpetas requieren una herramienta de integración para procesarlos. Por lo tanto, las herramientas de empaquetado modular (Module Bundler) como Webpack parecen integrar todos los archivos.

El beneficio de las herramientas de empaquetado modular es que, además de permitirnos modularizar todos los archivos, también puede mejorar el rendimiento de manera efectiva.

También dedicaré más espacio a explicar con más detalle aquí. Webpack es una herramienta de empaquetado modular. Su función principal es integrar varios archivos en el proyecto, incluidos JavaScript, CSS, LESS, SCSS, JSX, etc., en uno o más. un archivo final. Este paquete modular ayuda a mejorar la eficiencia del desarrollo, especialmente en proyectos grandes, podemos modularizar y dividir funciones para facilitar la reutilización y las pruebas del código.

Webpack es más que una simple herramienta de empaquetado, también proporciona una serie de características poderosas, como la división de código (Code Splitting), que permite que el código se divida en múltiples fragmentos y se cargue solo cuando sea necesario para mejorar la velocidad de carga de la página. Al mismo tiempo, la modularización (Modulize) es el concepto central de Webpack. Al dividir funciones grandes en archivos y funciones pequeños, la estructura del código del programa es clara y fácil de mantener y probar.

Además, Webpack también puede optimizar el rendimiento al empaquetar diferentes módulos y archivos dispersos en diferentes ubicaciones en un solo archivo, lo que reduce el tiempo de carga del navegador y mejora el rendimiento de la aplicación.

Introducción a la función del paquete web

División de código

Divida el código del programa en varios bloques y cargue un bloque determinado cuando necesitemos usarlo.

modularizar

La modularización es un concepto muy importante. Dividirá muchas funciones grandes en archivos y funciones pequeños y utilizará estos archivos pequeños modulares para su reutilización y prueba.

Optimizar el rendimiento

Empaque varios módulos y algunos archivos dispersos en diferentes lugares en un solo archivo, de modo que si usa una determinada función para leerlo, el tiempo de carga se puede reducir considerablemente.

Utilice la última sintaxis

La herramienta de empaquetado de Webpack puede integrar múltiples herramientas, incluido Babel. Por lo tanto, también puede utilizar la sintaxis más reciente, incluidas JSX, ES6, etc., integrando el Webpack de Babel.

La ventaja de integrar Babel y Webpack es que puede utilizar las últimas versiones de la sintaxis de JavaScript, incluidos ES6 y JSX, y estas sintaxis se convertirán en versiones ejecutables por el navegador durante el proceso de compilación. Esta integración permite a los desarrolladores aprovechar al máximo las últimas tecnologías y, al mismo tiempo, garantizar que las aplicaciones se ejecuten de manera estable en una variedad de navegadores.

¿Qué es la NPM?

Anteriormente se presentaron dos herramientas, pero ¿dónde puedo descargar estas herramientas o códigos? Para los desarrolladores de aplicaciones para usuario, npm estará disponible automáticamente siempre que Node.js esté instalado. ¿Qué es npm?

npm es el registro de software más grande del mundo. Los desarrolladores de código abierto de todos los continentes utilizan npm para compartir y tomar prestados paquetes de módulos de software, y muchas empresas también utilizan npm para gestionar el desarrollo privado.

El nombre completo de npm es Node Package Manager. Podemos instalar y administrar paquetes a través de la herramienta npm cli en Node.

Por ejemplo, si desea utilizar el paquete React, solo necesita ingresar el comando en la terminal, y npm encontrará automáticamente el marco frontal de reacción del Registro y lo descargará a la carpeta node_modules.

Cita

Reaccionar movimiento vernáculo 08 - Babel Webpack Npm

Reaccionar serie de deportes vernáculos

React JSX – Reaccionar movimiento vernáculo 06

Cómo funciona React – React Vernacular Movement 05

Funciones de alto orden de JavaScript: React Vernacular Movement 04

JavaScript Async Await - Reaccionar movimiento vernáculo 03

Objeto JavaScript ES6 - Reaccionar movimiento vernáculo 02

JavaScript ES6 - Reaccionar movimiento vernáculo 01

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

es_ESEspañol