I've been following more or less the official guide to setup a local dev environment with react and it seems to use create-react-app
, which sets up really a lot.
Now, if I run npm run build
I get a minified version of everything in the build
folder. If I, however, run npm start
the version NodeJS serves does not seem to have any modifications. But I cannot see these files.
So either:
npm start
somewhere? As these seem to be unmodified. (build
is never modified there)npm run build
, so it does a "development" build with unminimized files?My aim is just to get access to an unminimized version of react scripts.
As for the last question I've tried some parameters and enironmental variables as suggested in this question, but as you can see, it failed:
$ NODE_ENV=dev npm run build --dev --configuration=dev > [email protected] build [...] > react-scripts build Creating an optimized production build... [...]
My package.json
has the default scripts:
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },
Note: Please do not ask why I am doing it or try to convince me that it is bad. There are many reasons why I'd maybe want this, e.g. debugging or this specific use case.
If you work on a React project, chances are you have to deal with Babel. It is needed for 2 main tasks: To compile JSX into React.
While React can be used without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of: A package manager, such as Yarn or npm.
Bookmark this question.
To change the webpack config and build scripts you have either to eject from create-react-app (i would not recommend this step, as it breaks future compatibility) or you can use tools like rewire to override some settings
Take a look at this https://github.com/timarney/react-app-rewired
I personally used just rewire
npm i rewire --save-dev
Here is a sample config i created for one of my projects in the past and it worked pretty good!
build.js
const rewire = require('rewire'); const defaults = rewire('react-scripts/scripts/build.js'); const config = defaults.__get__('config'); // Consolidate chunk files instead config.optimization.splitChunks = { cacheGroups: { default: false, }, }; // Move runtime into bundle instead of separate file config.optimization.runtimeChunk = false; // JS config.output.filename = '[name].js'; // CSS. "5" is MiniCssPlugin config.plugins[5].options.filename = '[name].css'; config.plugins[5].options.publicPath = '../';
Then in my package.json i changed the npm script links like this (node build which will run the build.js script)
package.json
"scripts": { "start": "react-scripts start", "build": "node build && gulp", "test": "react-scripts test", "eject": "react-scripts eject" },
So if you really want to eject from create-react-app, all you have to do is to run
npm run-script eject
Then you will get a new folder with all configs used by create-react-app
But as i said before, there is no reason why not to use rewire and just override the config instead of ejecting
if it helps, please don't forget to mark as answer Cheers and good success
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With