example - webpack react 2018

Diferencia entre Webpack/babel y react-scripts

Question

Recientemente comencé a trabajar en paquetes web y react-scripts y me gustaría saber las ventajas y desventajas de usarlos y en qué se diferencian entre sí.

Answer 1

Básicamente, trabajan para cosas diferentes y, por lo general, aparecen juntas. Explicaré para qué diseñaron.

Babel

Babel es un transpiler de código, puede traducir todo tipo de versión alta de ECMAScript (no solo ECMAScript, sino que es fácil de entender) a ES5, convertir la gramática no compatible con el navegador a ES5 es su trabajo principal

Webpack

Webpack es un analizador de dependencias o un agrupador de módulos. por ejemplo, el módulo A requiere B como dependencia, el módulo B requiere C como dependencia, luego el webpack generará un mapa de dependencia como C -> B -> A. La condición del mundo real es mucho más complicada, pero tenga en cuenta que Webpack es un analizador de dependencias para obtener módulos con complejos complejos de dependencia en paquetes. Hablando de su relación con babel, cuando las dependencias de webpack manejan todo en js es necesario porque webpack funciona sobre javascript, así que los cargadores de uso de webpack cargan diferentes tipos de recursos desde el código de origen a javascript, cuando necesitamos manejar ES6 o ES7 o Typescripts , usamos babel-loader para hacer estos recursos.

react-script

cuando iniciamos un entorno de desarrollo de proyectos basado en la reacción, la configuración es un trabajo realmente difícil, por lo que la gente crea un paquete npm llamado react-script para obtener todas las dependencias que un proyecto basado en react puede necesitar. así que react-script es un paquete npm con dependencias un proyecto basado en la reacción puede necesitar iniciar rápidamente un proyecto. Babel y webpack en la lista de dependencias de react-script.

Answer 2

WebPack y react-scripts son cosas ligeramente diferentes.

Webpack se utiliza para compilar paquetes para su aplicación web, que puede ser de forma libre y tener algún punto de entrada. Más entonces, el paquete web se usa con presets de babel, lo que le permite usar construcciones modernas de ES6 + en los navegadores relativamente antiguos. Además, el paquete web es responsable de los módulos de nodo dependientes del ensamblaje en un archivo, y tal vez lo comprima y optimice. Puede leer más sobre la filosofía de webpack aquí: https://webpack.js.org/concepts/

React-scripts es solo un kit de inicio para lanzar algunos webpack-dev-server personalizados, que están configurados para funcionar con la plantilla provista para el patio de recreo React. Es solo para propósitos de demostración. La mayoría de las bibliotecas web modernas tienen su propio kit de inicio, incluso bibliotecas del lado del servidor, por ejemplo, https://github.com/reimagined/resolve/tree/master/packages/resolve-scripts y así sucesivamente