Skip to content
This repository was archived by the owner on Apr 24, 2024. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ If those defaults do not work for you, the script accepts some arguments:
- `--react-scripts-version`: expects the `react-scripts` version you are using in your project i.e `2.0.3`. If not given it will be implied from your `node_modules` and if it cannot be implied the version `2.1.2` will be the default. Consider setting it if you **ejected** and are not using the latest `react-scripts` version.
- `-p|--public-path`: expects a relative URL where `/` is the root. If you serve your files using an external webserver this argument is to match with your web server configuration. More information can be found in [webpack configuration guide](https://webpack.js.org/configuration/output/#output-publicpath).
- default: "".
- `--skip-cleanup`: Skips the initial cleanup of the build folder. Could be beneficial when the cleanup is handled beforehand and some other files are moved to the build folder before running this script.
- `-v|--verbose`: display webpack build output.

# Contributions
Expand Down
85 changes: 45 additions & 40 deletions scripts/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const {
chunkFilename,
afterInitialBuildHook,
afterRebuildHook,
skipCleanup,
},
} = require('../utils/cliHandler');
const { getReactScriptsVersion, isEjected } = require('../utils');
Expand Down Expand Up @@ -129,49 +130,48 @@ config.plugins[htmlPluginIndex] = new HtmlWebpackPlugin({
});

spinner.succeed();
spinner.start('Clear destination folder');

let inProgress = false;

fs.emptyDir(paths.appBuild)
.then(() => {
spinner.succeed();

return new Promise((resolve, reject) => {
const webpackCompiler = webpack(config);
new webpack.ProgressPlugin(() => {
if (!inProgress) {
spinner.start('Start webpack watch');
inProgress = true;
}
}).apply(webpackCompiler);

webpackCompiler.watch({}, (err, stats) => {
if (err) {
return reject(err);
}

spinner.succeed();

runHook('after rebuild hook', spinner, afterRebuildHook);

inProgress = false;

if (verbose) {
console.log();
console.log(
stats.toString({
chunks: false,
colors: true,
})
);
console.log();
}

return resolve();
});
});
})
Promise.resolve()
.then(() => skipCleanup || clearDestinationFolder())
.then(
() =>
new Promise((resolve, reject) => {
const webpackCompiler = webpack(config);
new webpack.ProgressPlugin(() => {
if (!inProgress) {
spinner.start('Start webpack watch');
inProgress = true;
}
}).apply(webpackCompiler);

webpackCompiler.watch({}, (err, stats) => {
if (err) {
return reject(err);
}

spinner.succeed();

runHook('after rebuild hook', spinner, afterRebuildHook);

inProgress = false;

if (verbose) {
console.log();
console.log(
stats.toString({
chunks: false,
colors: true,
})
);
console.log();
}

return resolve();
});
})
)
.then(() => copyPublicFolder())
.then(() => runHook('after initial build hook', spinner, afterInitialBuildHook));

Expand Down Expand Up @@ -207,3 +207,8 @@ function handleBuildPath(userBuildPath) {

return path.join(process.cwd(), userBuildPath);
}

function clearDestinationFolder() {
spinner.start('Clear destination folder');
return fs.emptyDir(paths.appBuild).then(() => spinner.succeed());
}
8 changes: 7 additions & 1 deletion utils/cliHandler.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,15 @@ module.exports = meow(

--react-scripts-version Version of the react-scripts package used in your project i.e 2.0.3. If not given it will be implied from your package.json and if it cannot be implied the major version 2 will be the default.

--skip-cleanup Skips the initial cleanup of the build folder. Could be beneficial when the cleanup is handled beforehand and some other files are moved to the build folder before running this script.

-v, --verbose

Examples
$ cra-build-watch -b dist/ -p /assets
$ cra-build-watch --chunk-filename './js/[chunkhash].[name]' -o './js/myapp'
$ cra-build-watch -b dist/ -p /assets --chunk-filename './js/[name]/[hash].js' -v
$ cra-build-watch --skip-cleanup
`,
{
flags: {
Expand Down Expand Up @@ -63,7 +66,10 @@ module.exports = meow(
},
'after-rebuild-hook': {
type: 'string',
}
},
'skip-cleanup': {
type: 'boolean',
},
},
}
);