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:
- ¿Qué es Babel?
- ¿Qué es el paquete web?
- ¿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
Reponer
Gracias aquí Sam Huang Suplemento, los lectores pueden leer en el área especial de Sam.
Me gustaría hacer algunas adiciones al capítulo donde se menciona a Babel en el artículo. Babel en sí es un compilador, lo cual es cierto (el sitio web oficial lo afirma), pero si se refiere a la parte compatible con versiones anteriores, puede ser más preciso. utilizar un transpilador. ES6 tiene mucho azúcar de sintaxis, que se puede convertir a sintaxis de ES5 a través de babel, lo que puede tener una mejor compatibilidad.
Entonces, la comparación entre traducción literal y traducción compilada es la relación entre el lenguaje y el entorno de ejecución. Actualmente, existen pocos lenguajes de traducción puramente literal (para tener en cuenta tanto el rendimiento como la flexibilidad, como tecnologías). Generalmente se introducen JIT)
Español 
繁體中文 
English 
简体中文 
한국어 
日本語