Cuando se crea una nueva aplicación usando la aplicación «create-react-app», todos nuestros ajustes de construcción son en realidad preconfigurados por la herramienta. Por lo tanto, no podemos hacer ninguna actualización en la configuración de construcción, por ejemplo, no tenemos acceso al archivo webpack.config. Pero hay una forma de personalizar la configuración y no estar restringidos por la configuración proporcionada por la aplicación Create React. Para ello, podemos simplemente ejecutar el comando:
1npm ejecutar expulsar
Expulsar nos dará un control completo sobre los archivos de configuración así como las dependencias como Webpack/Babel/ESLint.Expulsar realmente bifurca la configuración de la aplicación Create React y la mueve a nuestra aplicación. Después de ejecutar el comando eject, podemos ver una carpeta $0027config$0027 creada en nuestro proyecto que tiene archivos como webpack.config para Desarrollo y Producción más un archivo webpackDevServer.config. También podemos ver que en el archivo package.json, la única dependencia de construcción reac-scripts es removida de nuestro proyecto tutorial y todas las dependencias individuales son listadas.
Sin embargo, tenga en cuenta que ejecutar la expulsión es un paso o acción irreversible. Es decir, no podemos revertir o volver al estado inicial después de ejecutar este comando.
Después de expulsar, podemos seguir trabajando en nuestra aplicación normalmente y todos los comandos mencionados anteriormente funcionarán (construir, iniciar y probar). Pero, ahora somos responsables de la configuración. Por lo tanto, es mejor evitar el uso de eject si no tenemos muchos conocimientos sobre la configuración o las dependencias. Al menos para el proyecto del tutorial, es mejor no utilizarlo.
Como referencia, así es como se vería el paquete.json después de ejecutar el comando de expulsión:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110{"nombre": "my-react-tutorial-app", "versión": "0". 1.0", "privado":true, "dependencias":{"@babel/core": "7.1.0","@svgr/webpack": "2.4.1", "babel-core": "7.0.0-bridge.0 ", "babel-eslint": "9.0.0", "babel-jest": "23.6.0", "babel-loader": "8.0.4", "babel-plugin-named-asset-import":"^0.2.2", "babel-preset-react-app":"^5. 0,2", "bfj": "6.1.1", "case-sensitive-paths-webpack-plugin": "2.1.2", "chalk": "2.4.1", "css-loader": "1.0.0", "dotenv": "6.0.0", "dotenv-expand": "4.2.". 0", "eslint": "5.6.0", "eslint-config-react-app":"^3.0.3", "eslint-loader": "2.1.1", "eslint-plugin-flowtype": "2.50.1", "eslint-plugin-import": "2.14". 0", "eslint-plugin-jsx-a11y": "6.1.1", "eslint-plugin-react": "7.11.1", "file-loader": "2.0.0", "fs-extra": "7.0.0", "html-webpack-plugin": "4.0.0-alpha.2 ", "identidad-objeto-proxy": "3.0.0", "jest": "23.6.0", "jest-pnp-resolver": "1.0.1", "jest-resolver": "23.6.0", "mini-css-extract-plugin": "0.4.3", "optimize-css-assets-webpack-plugin": "5.0.1", "pnp-webpack-plugin": "1.1. 0", "postcss-flexbugs-fixes": "4.1.0", "postcss-loader": "3.0.0", "postcss-preset-env": "6.0.6", "postcss-safe-parser": "4. 0.1", "react":"^16.5.2", "react-app-polyfill":"^0.1.3", "react-dev-utils":"^6.0.3", "react-dom":"^16. 5.2", "resolve": "1.8.1", "sass-loader": "7.1.0", "style-loader": "0.23.0", "terser-webpack-plugin": "1.1.0", "url-loader": "1.1.1", "webpack": "4.19.1", "webpack-dev-server": "3.1.9", "webpack-manifest-plugin": "2.0". 4", "workbox-webpack-plugin": "3.6.2"}, "scripts":{"start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js"}, "eslintConfig":{"extends": "react-app"}, "browserslist":[">0. 2%", "no muerto", "no ie <= 11", "no op_mini all"], "jest":{"collectCoverageFrom":["src/**/*.{js,jsx}"], "resolver": "jest-pnp-resolver", "setupFiles":["react-app-polyfill/jsdom"], "testMatch":["<rootDir>/src/**/__tests__/**/*. {js,jsx}", "rootDir"/src/**/?(*.)(spec|test).{js,jsx}"], "testEnvironment": "jsdom", "testURL": "http://localhost", "transform":{"^.+\\N.(js|jsx)$": "rootDir"/node_modules/babel-jest","^.+N". css$": "www. rootDir... /config/jest/cssTransform.js","^(?!.*.(js|jsx|css|json)$)": "www. rootDir... /config/jest/fileTransform... js"}, "transformIgnorePatterns":["[/\N-]nodo_módulos[/N-].+(js|jsx)$","^.+N-módulo". (css|sass|scss)$"], "moduleNameMapper":{"^react-native$": "react-native-web","^.+Nmódulo. (css|sass|scss)$": "identity-obj-proxy"}, "moduleFileExtensions":["web.js", "js", "json", "web.jsx", "jsx", "node"]}, "babel":{"presets":["react-app"]}}json