¿Dónde está la configuración y los archivos del paquete web create-react-app?


172

Creo un proyecto ReactJS con el create-react-apppaquete y funcionó bien, pero no puedo encontrar los archivos y las configuraciones del paquete web.

¿Cómo funciona react-create-app con webpack? ¿Dónde se encuentran los archivos de configuración del paquete web en una instalación predeterminada create-react-app? No puedo encontrar archivos de configuración en las carpetas de mi proyecto.

No he creado un archivo de configuración de anulación. Puedo administrar la configuración con otros artículos, pero quiero encontrar los archivos de configuración convencionales.

Respuestas:


96

Si desea encontrar archivos y configuraciones de paquetes web, vaya a su archivo package.json y busque secuencias de comandos

img

Encontrará que el objeto scripts está usando una biblioteca react-scripts

Ahora vaya a node_modules y busque la carpeta react- scripts react-script-in-node-modules

Esta carpeta react-scripts / scripts y react-scripts / config contiene todas las configuraciones del paquete web.


1
Vi pero no he reaccionar guiones-dir
Mohammad

44
Acabo de crear una aplicación usando create-react-app y en mi caso hay una carpeta react-scripts en node_modules. puedes compartir tu paquete.json
Vikram Thakur

55
Esta respuesta ya no es correcta , NPM ahora es plana, lo que significa que todos los módulos están en el node_modulesdirectorio raíz
vsync

44
La configuración actual del paquete web está aquí: github.com/facebook/create-react-app/blob/master/packages/…
protoEvangelion

El caso de uso más común sería personalizar la configuración del paquete web del proyecto. Pero si está en node_modules, se sobrescribirá en cada instalación de npm, ¿no?
Blanc

59

De la documentación :

No necesita instalar o configurar herramientas como Webpack o Babel. Están preconfigurados y ocultos para que pueda centrarse en el código.

Si desea tener acceso a los archivos de configuración, debe expulsar ejecutando:

npm run eject

Nota: esta es una operación unidireccional. Una vez que expulsa, no puede volver!

En la mayoría de los escenarios, es mejor no expulsar y tratar de encontrar una manera de hacerlo funcionar de otra manera. De esa manera, puede actualizar sus dependencias create-react-appy no tener que lidiar con el infierno de dependencias de Webpack.


66
Sé que están ocultos, pero quiero saber dónde están estos y cómo reaccionar-crear-aplicación manejar esta capacidad.
Mohammad el

Entonces probablemente tendrá que mirar el código fuente. No estoy seguro
klugjo

2
@Mohammad revisa la fuente de 'react-scripts', puedes encontrar toda la configuración allí
Jose Munoz

1
No responde la pregunta, pero me ayudó a pesar de todo
Chicken Soup

32

Mucha gente viene a esta página con el objetivo de encontrar la configuración y los archivos del paquete web para agregarles su propia configuración. Otra forma de lograr esto sin ejecutar npm run ejectes usar react-app-rewired . Esto le permite sobrescribir el archivo de configuración de su paquete web sin expulsarlo.


66
¿Sigue siendo la solución preferida? Existe esta advertencia sobre el proyecto cableado : github.com/timarney/react-app-rewired#rewire-your-app- : "A partir de Create React App 2.0, este repositorio es" ligeramente "mantenido principalmente por la comunidad en este momento. .. Nota: Yo personalmente uso next.js o Razzle, que son compatibles con Webpack de fábrica ".
Anthony Kong

24

Suponiendo que no desea expulsar y solo desea ver la configuración, los encontrará en /node_modules/react-scripts/config

webpack.config.dev.js. //used by `npm start`
webpack.config.prod.js //used by `npm run build`


10

Puede encontrarlo dentro de la carpeta / config .

Cuando expulsa, recibe un mensaje como:

 Adding /config/webpack.config.dev.js to the project
 Adding /config/webpack.config.prod.js to the project


3

Intente expulsar los archivos de configuración ejecutando:

npm run eject

entonces encontrarás una carpeta de configuración creada en tu proyecto. Encontrará los archivos de configuración de su paquete web init.


0

Sé que es bastante tarde, pero para las futuras personas que se encuentren con este problema, si desea tener acceso a la configuración webpack de CRA, no hay otra forma, excepto que tiene que ejecutar:

$ npm run eject

Sin embargo, con la expulsión, se despojará de las actualizaciones de la tubería CRA, por lo tanto, desde el punto de expulsión, debe mantenerla usted mismo.

Me he encontrado con este problema muchas veces y, por lo tanto, he creado una plantilla para aplicaciones de reacción que tienen la misma configuración que CRA, pero también ventajas adicionales (como componentes con estilo, prueba de unidad de jest, Travis ci para implementaciones, más bonita , ESLint, etc ...) para facilitar el mantenimiento. Mira el repositorio .

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.