From 5e6edb0728bdc80ea7eacee2dc7df7e17671b05a Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Mon, 13 May 2024 14:55:57 +0000 Subject: [PATCH] chore(webpack): remove react-dev-utils imports from build script use built-in webpack helpers in its place --- client/scripts/build.js | 148 +++++++--------------------------------- 1 file changed, 25 insertions(+), 123 deletions(-) diff --git a/client/scripts/build.js b/client/scripts/build.js index b5e2d64c2dec..4e32b36f116e 100644 --- a/client/scripts/build.js +++ b/client/scripts/build.js @@ -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"; @@ -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); } ) @@ -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); @@ -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 })); }); }); }