Skip to content

Commit

Permalink
chore(webpack): remove react-dev-utils imports from build script
Browse files Browse the repository at this point in the history 
use built-in webpack helpers in its place
  • Loading branch information
@LeoMcA
LeoMcA committed May 14, 2024
1 parent f434a26 commit 5e6edb0
Showing 1 changed file with 25 additions and 123 deletions.
148 changes: 25 additions & 123 deletions client/scripts/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,7 @@ import "../config/env.js";
import path from "node:path";
import chalk from "chalk";
import fs from "fs-extra";
import bfj from "bfj";
import webpack from "webpack";
import { checkBrowsers } from "react-dev-utils/browsersHelper.js";
import formatWebpackMessages from "react-dev-utils/formatWebpackMessages.js";
import printHostingInstructions from "react-dev-utils/printHostingInstructions.js";
import FileSizeReporter from "react-dev-utils/FileSizeReporter.js";
import printBuildError from "react-dev-utils/printBuildError.js";

import configFactory from "../config/webpack.config.js";
import paths from "../config/paths.js";
Expand All @@ -23,85 +17,23 @@ process.on("unhandledRejection", (err) => {
throw err;
});

const appPackage = JSON.parse(fs.readFileSync(paths.appPackageJson));

const measureFileSizesBeforeBuild =
FileSizeReporter.measureFileSizesBeforeBuild;
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const useYarn = fs.existsSync(paths.yarnLockFile);

// These sizes are pretty large. We'll warn for bundles exceeding them.
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;

const isInteractive = process.stdout.isTTY;

const argv = process.argv.slice(2);
const writeStatsJson = argv.indexOf("--stats") !== -1;

// Generate configuration
const config = configFactory("production");

// We require that you explicitly set browsers and do not fall back to
// browserslist defaults.
checkBrowsers(paths.appPath, isInteractive)
.then(() => {
// First, read the current file sizes in build directory.
// This lets us display how much they changed later.
return measureFileSizesBeforeBuild(paths.appBuild);
})
.then((previousFileSizes) => {
// Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash
fs.emptyDirSync(paths.appBuild);
// Merge with the public folder
copyPublicFolder();
// Start the webpack build
return build(previousFileSizes);
})
// Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash
fs.emptyDirSync(paths.appBuild);
// Merge with the public folder
copyPublicFolder();
// Start the webpack build
build()
.then(
({ stats, previousFileSizes, warnings }) => {
if (warnings.length) {
console.log(chalk.yellow("Compiled with warnings.\n"));
console.log(warnings.join("\n\n"));
console.log(
"\nSearch for the " +
chalk.underline(chalk.yellow("keywords")) +
" to learn more about each warning."
);
console.log(
"To ignore, add " +
chalk.cyan("// eslint-disable-next-line") +
" to the line before.\n"
);
} else {
console.log(chalk.green("Compiled successfully.\n"));
}

console.log("File sizes after gzip:\n");
printFileSizesAfterBuild(
stats,
previousFileSizes,
paths.appBuild,
WARN_AFTER_BUNDLE_GZIP_SIZE,
WARN_AFTER_CHUNK_GZIP_SIZE
);
console.log();

const publicUrl = paths.publicUrlOrPath;
const publicPath = config.output.publicPath;
const buildFolder = path.relative(process.cwd(), paths.appBuild);
printHostingInstructions(
appPackage,
publicUrl,
publicPath,
buildFolder,
useYarn
);
(stats) => {
console.log(stats);
},
(err) => {
console.log(chalk.red("Failed to compile.\n"));
printBuildError(err);
console.log(err);
process.exit(1);
}
)
Expand All @@ -123,14 +55,13 @@ checkBrowsers(paths.appPath, isInteractive)
process.exit(1);
});

// Create the production build and print the deployment instructions.
function build(previousFileSizes) {
// Create the production build
function build() {
console.log("Creating an optimized production build...");

const compiler = webpack(config);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
let messages;
if (err) {
if (!err.message) {
return reject(err);
Expand All @@ -145,58 +76,29 @@ function build(previousFileSizes) {
err["postcssNode"].selector;
}

messages = formatWebpackMessages({
errors: [errMessage],
warnings: [],
});
} else {
messages = formatWebpackMessages(
stats.toJson({ all: false, warnings: true, errors: true })
);
reject(errMessage);
}
if (messages.errors.length) {
// Only keep the first error. Others are often indicative
// of the same problem, but confuse the reader with noise.
if (messages.errors.length > 1) {
messages.errors.length = 1;
}
return reject(new Error(messages.errors.join("\n\n")));
if (stats.hasErrors()) {
return reject(
stats.toString({ all: false, colors: true, errors: true })
);
}
if (
process.env.CI &&
(typeof process.env.CI !== "string" ||
process.env.CI.toLowerCase() !== "false") &&
messages.warnings.length
stats.hasWarnings()
) {
// Ignore sourcemap warnings in CI builds. See #8227 for more info.
const filteredWarnings = messages.warnings.filter(
(w) => !/Failed to parse source map/.test(w)
console.log(
chalk.yellow(
"\nTreating warnings as errors because process.env.CI = true.\n" +
"Most CI servers set it automatically.\n"
)
);
if (filteredWarnings.length) {
console.log(
chalk.yellow(
"\nTreating warnings as errors because process.env.CI = true.\n" +
"Most CI servers set it automatically.\n"
)
);
return reject(new Error(filteredWarnings.join("\n\n")));
}
}

const resolveArgs = {
stats,
previousFileSizes,
warnings: messages.warnings,
};

if (writeStatsJson) {
return bfj
.write(paths.appBuild + "/bundle-stats.json", stats.toJson())
.then(() => resolve(resolveArgs))
.catch((error) => reject(new Error(error)));
return reject(stats.toString({ all: false, warnings: true }));
}

return resolve(resolveArgs);
return resolve(stats.toString({ colors: true, warnings: true }));
});
});
}
Expand Down

0 comments on commit 5e6edb0

Please sign in to comment.