Construcción de paquete web frente a compilación de scripts de reacción

Resuelto magpie asked hace 6 años • 2 respuestas

Digamos que la configuración del paquete web es la siguiente

{
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
},

Ahora la construcción webpackes

ingrese la descripción de la imagen aquí

y la compilación de reaccionar-scripts (estático contiene css, js y medios en carpetas separadas)

ingrese la descripción de la imagen aquí

Pregunta : ¿Existe alguna ventaja específica del paquete web sobre la compilación de scripts de reacción? (incluido, entre otros, el rendimiento)

NOTA : package.json se edita para lograr esto.

magpie avatar Sep 05 '18 11:09 magpie
Aceptado

Webpack es un paquete de propósito general, con aplicaciones más allá de React. Antes create-react-app, la web estaba llena de ejemplos de cómo configurar un nuevo proyecto React que utiliza webpack como paquete. Es extremadamente flexible y puede manejar cosas que incluyen y más allá de lo que necesitaría una aplicación React. Funciona para Angular, Vue, NodeJS e incluso Web Assembly.

Pero solía tardar un poco en configurarse. Deberá comprender su funcionamiento y configurarlo para que pueda transpilar su código React+ES6 a plan-vanilla JS. Debería decidir la estructura de salida que desee y configurar el paquete web para ello. Y luego agregue usted mismo soporte para la recarga de módulos en caliente y la división de código. Durante esto, también deberá agregar otros complementos requeridos por Webpack para admitir todo lo anterior :).

Naturalmente, esto causó cierta fatiga en las personas que estaban comenzando con React.

Entonces, Facebook creó cra que utiliza internamente un paquete web, preconfigurado para incluir todas las buenas herramientas para cuidar estos conceptos básicos y ayudarlo a concentrarse en la parte React de su código. Le oculta el paquete web tanto como sea posible; de ​​lo contrario, el proceso de compilación puede interrumpirse si el usuario cambia la configuración.

Aparte de eso, las convenciones estructurales que utiliza cra no deberían tener ningún impacto en el rendimiento sobre una configuración básica de paquete web. Es sólo una convención.

Entonces su pregunta debería ser: ¿ cuándo usaría create-react-app y cuándo usaría Webpack?

Como principiante, es posible que desees seguir con cra mientras te concentras en tu aplicación de reacción. Con el tiempo, llegará un momento en el que lo que desea hacer no sea compatible con la configuración del paquete web que CRA administra bajo el capó. Un ejemplo muy común es si desea escribir una biblioteca de componentes para reutilizarla en otras aplicaciones. Esto no lo puede hacer cra (se trata de toda la aplicación :)). Luego puede cambiar al paquete web y comenzar a aprenderlo.

hazardous avatar Sep 05 '2018 07:09 hazardous

reaccionar-scripts oculta todas las configuraciones del paquete web detrás de escena. La ventaja de esto es que lo hace más limpio y, dado que create-react-appse actualiza periódicamente, es fácil mantenerse actualizado con React, Webpack y Babel. La comunidad soluciona automáticamente los problemas por usted.

En términos de rendimiento, debería ser el mismo independientemente de los scripts de reacción o del paquete web.

Ventajas de ejecutar solo webpack:

  • Control total de su entorno

  • Puede hacer cosas personalizadas como renderizado del lado del servidor fácilmente (todavía es posible concreate-react-app

  • Conocimiento de webpack como habilidad.

Desventajas de solo el paquete web

  • Totalmente a cargo de la actualización y el mantenimiento del paquete web (algunas versiones del paquete web no son compatibles con versiones anteriores ni compatibles con el futuro)

  • Puede ser intimidante y un dolor de cabeza si intentas aprender a reaccionar rápidamente.

Si quieres personalizar create-react-app, aquí tienes información.

https://auth0.com/blog/how-to-configure-create-react-app/

Aquí está la representación del lado del servidor concreate-react-app

https://hackernoon.com/server-side-rendering-with-create-react-app-1faf5a9d1eff

TLDR: use create-react-app/ react-scriptssi desea ir de 0 a 100 lo más rápido posible por cualquier motivo

Utilice solo el paquete web si le gusta jugar bajo el capó

maxadorable avatar Sep 05 '2018 06:09 maxadorable