【问题标题】:How can I make `react-scripts build` quiet?我怎样才能让`react-scripts build`安静下来?
【发布时间】:2018-08-31 11:46:47
【问题描述】:

我正在处理一个包含许多使用create-react-app 创建的 Node 包的 repo,所有这些包都是由 CI 系统构建和测试的。每个包的构建/测试,由react-scripts buildreact-scripts test --silent 完成,目前正在产生超过 20 行的输出,生成一个包含超过 100 行材料的构建日志,例如“gzip 后的文件大小”和“找出更多关于这里的部署。”这使得在该日志中查看错误消息、警告或其他问题变得更加困难。

除了为每个包编写我自己的自定义构建脚本(也可能还有测试脚本)之外,有什么方法可以让我平静下来吗?如果我确实需要自定义脚本,那么尽可能多地重用正在进行构建和测试的现有代码的最佳方法是什么?

【问题讨论】:

  • 你找到解决这个问题的办法了吗?
  • @LukasGjetting 我进行了调查,目前唯一的解决方案似乎是使用不同的构建脚本。有关详细信息,请参阅我刚刚在下面发布的答案。感谢 PR 解决这个问题。
  • 您可以创建一个批处理文件来执行react-scripts。这使您可以使该批处理文件静音。例如在 Windows 上,您可以将 @echo off 放在该批处理文件的第一行。或者将其输出重定向到带有react-scripts build > file.txt的文件。
  • @bvdb 构建是由一个 shell 脚本运行的,所以它在 @echo off 的意义上已经在 .BAT 文件中“静默”了。问题是输出不是来自批处理文件,而是来自构建本身。是的,我可以重定向它,但这也会重定向隐藏在所有详细构建输出中的错误和警告消息。
  • @CurtJ.Sampson 我不知道他们是如何实现输出的,但惯例是错误消息被推送到单独的错误输出。即foo.exe 1> stdout.txt 2> errout.txt。但我认为你是对的,那可能行不通。但理论上你应该可以react-scripts build 1> ignorestdout.txt只保留错误输出。

标签: react-scripts


【解决方案1】:

react-scripts build 运行 bin/react-scripts.js 来自 react-scripts 包,基本上只是运行 scripts/build.js 来自同一个包。

遗憾的是,build.js 脚本(无论如何是从 2018 年 10 月 15 日开始)被硬编码为调用诸如 printFileSizesAfterBuild()printHostingInstructions() 之类的函数,而没有任何禁用这些函数的选项。所以目前没有办法改变这个,除了复制build.js,修改它不打印你不想要的东西,然后改用它。

@LukasGjetting 有一个拉取请求 PR #5429 向构建脚本添加 --silent 选项。由于缺乏不活动,它已经关闭,create-react-app 开发人员在其他地方已经明确表示他们不打算让react-scripts 非常可配置;他们建议的解决方案就是使用您自己的build.js 脚本。

【讨论】:

  • 这需要弹出项目对吗?
  • @paul23 你需要自己复制build.js;您是否选择通过弹出(IIRC 也复制许多其他脚本)来执行此操作取决于您。
【解决方案2】:

如果您从应用程序根目录中的 /node_modules/react-scripts/scripts/build.js 复制 build.js 脚本,请使路径相对于 const basepath = __dirname+'/node_modules/react-scripts/scripts/' 并消除不必要的日志。 将 package.json 脚本构建调整为:node build 你有一个非常安静的 react 应用程序构建:)

示例构建脚本:

// @remove-on-eject-begin
/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
// @remove-on-eject-end
'use strict';

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';
const basepath = __dirname + '/node_modules/react-scripts/scripts/';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  throw err;
});

// Ensure environment variables are read.
require(basepath + '../config/env');
// @remove-on-eject-begin
// Do the preflight checks (only happens before eject).
const verifyPackageTree = require(basepath + 'utils/verifyPackageTree');
if (process.env.SKIP_PREFLIGHT_CHECK !== 'true') {
  verifyPackageTree();
}
const verifyTypeScriptSetup = require(basepath + 'utils/verifyTypeScriptSetup');
verifyTypeScriptSetup();
// @remove-on-eject-end

const path = require('path');
const chalk = require('react-dev-utils/chalk');
const fs = require('fs-extra');
const webpack = require('webpack');
const configFactory = require(basepath + '../config/webpack.config');
const paths = require(basepath + '../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError');

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;

// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  process.exit(1);
}

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

// We require that you explicitly set browsers and do not fall back to
// browserslist defaults.
const {
  checkBrowsers
} = require('react-dev-utils/browsersHelper');
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);
  })
  .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();
      console.log(chalk.green('Compiled successfully.\n'));

      const appPackage = require(paths.appPackageJson);
      const publicUrl = paths.publicUrlOrPath;
      const publicPath = config.output.publicPath;
      const buildFolder = path.relative(process.cwd(), paths.appBuild);
      // printHostingInstructions(
      //   appPackage,
      //   publicUrl,
      //   publicPath,
      //   buildFolder,
      //   useYarn
      // );
    },
    err => {
      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
      if (tscCompileOnError) {
        console.log(
          chalk.yellow(
            'Compiled with the following type errors (you may want to check these before deploying your app):\n'
          )
        );
        printBuildError(err);
      } else {
        console.log(chalk.red('Failed to compile.\n'));
        printBuildError(err);
        process.exit(1);
      }
    }
  )
  .catch(err => {
    if (err && err.message) {
      console.log(err.message);
    }
    process.exit(1);
  });

// Create the production build and print the deployment instructions.
function build(previousFileSizes) {
  // We used to support resolving modules according to `NODE_PATH`.
  // This now has been deprecated in favor of jsconfig/tsconfig.json
  // This lets you use absolute paths in imports inside large monorepos:
  if (process.env.NODE_PATH) {
    console.log(
      chalk.yellow(
        'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
      )
    );
    console.log();
  }


  const compiler = webpack(config);
  return new Promise((resolve, reject) => {
    compiler.run((err, stats) => {
      let messages;
      if (err) {
        if (!err.message) {
          return reject(err);
        }

        let errMessage = err.message;

        // Add additional information for postcss errors
        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
          errMessage +=
            '\nCompileError: Begins at CSS selector ' +
            err['postcssNode'].selector;
        }

        messages = formatWebpackMessages({
          errors: [errMessage],
          warnings: [],
        });
      } else {
        messages = formatWebpackMessages(
          stats.toJson({
            all: false,
            warnings: true,
            errors: true
          })
        );
      }
      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 (
        process.env.CI &&
        (typeof process.env.CI !== 'string' ||
          process.env.CI.toLowerCase() !== 'false') &&
        messages.warnings.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(messages.warnings.join('\n\n')));
      }

      return resolve({
        stats,
        previousFileSizes,
        warnings: messages.warnings,
      });
    });
  });
}

function copyPublicFolder() {
  fs.copySync(paths.appPublic, paths.appBuild, {
    dereference: true,
    filter: file => file !== paths.appHtml,
  });
}

和示例 package.json 脚本选项:

"scripts": {
  "start": "react-scripts start", "build": "node build"
}

【讨论】:

  • 感谢您的代码,但我应该指出,问题的重点在于这样做不必提取和自定义构建脚本。 (对于一个项目来说这样做并没有那么糟糕,但是为十几个 pojrect 做和维护它是相当多的工作。)
  • 更改非常简单,可以轻松编写脚本来自动化该过程:处理从路径构建脚本,注入该基本路径,搜索路径并更改它们,shell节点新脚本,删除脚本事后。但是,你是对的:)
  • 我认为长期维护可能更简单、更便宜,如果要开始编写更多代码,只需在现有包的基础上创建一个新包并进行首选修改。 (尽管最后我相信我们将所需的更改与我们的自定义构建系统集成。)
【解决方案3】:

我自发地想到了chalk。至少您可以对响应进行颜色编码。听起来您正在使用的应用程序尚未(尚未)弹出。只有在弹出应用程序时,您才能修改create-react-app 基本文件。不幸的是,一旦弹出,您就无法逆转效果。有帮助就点个赞

【讨论】:

  • 部分原因是不必退出应用程序,因为这样您就需要手动复制任何脚本升级,而不仅仅是更新依赖的create-react-app 包。
  • 只是指向选项。现在只是你想要它有多糟糕的问题。不值得海事组织。抱歉,我无法提供更多帮助
  • 嗯,谢谢,但我希望从“没有编写自己的自定义构建脚本”中可以清楚地看出我想使用包中的标准脚本。
猜你喜欢
  • 2012-06-03
  • 1970-01-01
  • 2012-05-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-05-27
相关资源
最近更新 更多