@1o1w1/react-dev-utils 中文文档教程

Question

react-dev-utils

此软件包包含一些 Create React App 使用的实用程序。
请参阅其文档：

• Getting Started – How to create a new app.
• User Guide – How to develop apps bootstrapped with Create React App.

Usage in Create React App Projects

这些实用程序默认随 Create React App 一起提供，默认包含它。 您不需要在 Create React App 项目中单独安装它。

Usage Outside of Create React App

如果您不使用 Create React App，或者如果您 ejected，您可以继续使用这些实用程序。 他们的开发将与 Create React App 保持一致，因此这些实用程序的主要版本可能会相对频繁地出现。 如果您想更好地控制它们，或者随意使用旧版本，请随意将它们分叉或复制并粘贴到您的项目中。 并非所有这些都是特定于 React 的，但我们可能会在未来使它们中的一些更特定于 React。

Entry Points

没有单一的入口点。 您只能导入单个顶级模块。

new InterpolateHtmlPlugin(htmlWebpackPlugin: HtmlWebpackPlugin, replacements: {[key:string]: string})

这个 Webpack 插件让我们可以将自定义变量插入到 index.html 中。
它通过其 事件。

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');

// Webpack config
var publicUrl = '/my-custom-url';

module.exports = {
  output: {
    // ...
    publicPath: publicUrl + '/',
  },
  // ...
  plugins: [
    // Generates an `index.html` file with the <script> injected.
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve('public/index.html'),
    }),
    // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
      PUBLIC_URL: publicUrl,
      // You can pass any key-value pairs, this was just an example.
      // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html.
    }),
    // ...
  ],
  // ...
};

new InlineChunkHtmlPlugin(htmlWebpackPlugin: HtmlWebpackPlugin, tests: Regex[])

这个 Webpack 插件将脚本块内联到 index.html 中。
它与 HtmlWebpackPlugin 4.x 协同工作。

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');

// Webpack config
var publicUrl = '/my-custom-url';

module.exports = {
  output: {
    // ...
    publicPath: publicUrl + '/',
  },
  // ...
  plugins: [
    // Generates an `index.html` file with the <script> injected.
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve('public/index.html'),
    }),
    // Inlines chunks with `runtime` in the name
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime/]),
    // ...
  ],
  // ...
};

new ModuleScopePlugin(appSrc: string | string[], allowedFiles?: string[])

这个 Webpack 插件确保来自应用程序源目录的相对导入不会到达它之外。

var path = require('path');
var ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

module.exports = {
  // ...
  resolve: {
    // ...
    plugins: [
      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
      // ...
    ],
    // ...
  },
  // ...
};

new WatchMissingNodeModulesPlugin(nodeModulesPath: string)

这个 Webpack 插件确保 npm install 强制重建项目。
我们不确定为什么这不是 Webpack 的默认行为。
有关详细信息，请参阅 #186。

var path = require('path');
var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');

// Webpack config
module.exports = {
  // ...
  plugins: [
    // ...
    // If you require a missing module and then `npm install` it, you still have
    // to restart the development server for Webpack to discover it. This plugin
    // makes the discovery automatic so you don't have to restart.
    // See https://github.com/facebook/create-react-app/issues/186
    new WatchMissingNodeModulesPlugin(path.resolve('node_modules')),
  ],
  // ...
};

checkRequiredFiles(files: Array<string>): boolean

确保所有传递的文件都存在。
文件名应该是绝对的。
如果未找到文件，则打印一条警告消息并返回 false。

var path = require('path');
var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');

if (
  !checkRequiredFiles([
    path.resolve('public/index.html'),
    path.resolve('src/index.js'),
  ])
) {
  process.exit(1);
}

clearConsole(): void

清除控制台，希望以跨平台的方式。

var clearConsole = require('react-dev-utils/clearConsole');

clearConsole();
console.log('Just cleared the screen!');

eslintFormatter(results: Object): string

这是我们的自定义 ESLint 格式化程序，可以很好地与 Create React App 控制台输出集成。
如果您愿意，可以使用默认值。

const eslintFormatter = require('react-dev-utils/eslintFormatter');

// In your webpack config:
// ...
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      include: paths.appSrc,
      enforce: 'pre',
      use: [
        {
          loader: 'eslint-loader',
          options: {
            // Pass the formatter:
            formatter: eslintFormatter,
          },
        },
      ],
    },
  ];
}

FileSizeReporter

measureFileSizesBeforeBuild(buildFolder: string): Promise<OpaqueFileSizes>

捕获传递的 buildFolder 中的 JS 和 CSS 资产大小。 保存结果值以便在构建后进行比较。

printFileSizesAfterBuild(webpackStats: WebpackStats, previousFileSizes: OpaqueFileSizes, buildFolder: string, maxBundleGzipSize?: number, maxChunkGzipSize?: number)

在构建后打印 JS 和 CSS 资产大小，并包括与之前使用 measureFileSizesBeforeBuild() 捕获的 previousFileSizes 的大小比较。 maxBundleGzipSize 和 maxChunkGzipSizemay 可以选择指定以在主包或块超过指定大小时（以字节为单位）时显示警告。

var {
  measureFileSizesBeforeBuild,
  printFileSizesAfterBuild,
} = require('react-dev-utils/FileSizeReporter');

measureFileSizesBeforeBuild(buildFolder).then(previousFileSizes => {
  return cleanAndRebuild().then(webpackStats => {
    printFileSizesAfterBuild(webpackStats, previousFileSizes, buildFolder);
  });
});

formatWebpackMessages({errors: Array<string>, warnings: Array<string>}): {errors: Array<string>, warnings: Array<string>}

从 webpack stats 对象中提取并美化警告和错误消息。

var webpack = require('webpack');
var config = require('../config/webpack.config.dev');
var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');

var compiler = webpack(config);

compiler.hooks.invalid.tap('invalid', function() {
  console.log('Compiling...');
});

compiler.hooks.done.tap('done', function(stats) {
  var rawMessages = stats.toJson({}, true);
  var messages = formatWebpackMessages(rawMessages);
  if (!messages.errors.length && !messages.warnings.length) {
    console.log('Compiled successfully!');
  }
  if (messages.errors.length) {
    console.log('Failed to compile.');
    messages.errors.forEach(e => console.log(e));
    return;
  }
  if (messages.warnings.length) {
    console.log('Compiled with warnings.');
    messages.warnings.forEach(w => console.log(w));
  }
});

printBuildError(error: Object): void

美化一些已知的构建错误。 传递错误对象以在控制台中记录美化的错误消息。

  const printBuildError = require('react-dev-utils/printBuildError')
  try {
    build()
  } catch(e) {
    printBuildError(e) // logs prettified message
  }

getProcessForPort(port: number): string

在 port 上查找当前正在运行的进程。 返回包含名称和目录的字符串，例如，

create-react-app
in /Users/developer/create-react-app

var getProcessForPort = require('react-dev-utils/getProcessForPort');

getProcessForPort(3000);

launchEditor(fileName: string, lineNumber: number): void

在 macOS 上，尝试查找已知的正在运行的编辑器进程并在其中打开文件。 它也可以通过 REACT_EDITOR、VISUAL 或 EDITOR 环境变量显式配置。 例如，您可以将 REACT_EDITOR=atom 放入您的 .env.local 文件中，Create React App 将遵守这一点。

noopServiceWorkerMiddleware(): ExpressMiddleware

返回服务于 /service-worker.js 的 Express 中间件，该中间件重置任何先前设置的服务工作者配置。 对开发有用。

openBrowser(url: string): boolean

尝试使用给定的 URL 打开浏览器。
在 Mac OS X 上，尝试通过 AppleScript 重用现有的 Chrome 选项卡。
否则，回退到 opn 行为。

var path = require('path');
var openBrowser = require('react-dev-utils/openBrowser');

if (openBrowser('http://localhost:3000')) {
  console.log('The browser tab has been opened!');
}

printHostingInstructions(appPackage: Object, publicUrl: string, publicPath: string, buildFolder: string, useYarn: boolean): void

构建项目后打印托管说明。

将已解析的 package.json 对象作为 appPackage 传递，将计划托管应用程序的 URL 作为 publicUrl，output.publicPath 来自您的 Webpack 配置作为 publicPath，buildFolder 名称，以及是否在说明中使用 useYarn。

const appPackage = require(paths.appPackageJson);
const publicUrl = paths.publicUrl;
const publicPath = config.output.publicPath;
printHostingInstructions(appPackage, publicUrl, publicPath, 'build', true);

WebpackDevServerUtils

choosePort(host: string, defaultPort: number): Promise<number | null>

如果用户确认可以这样做，则返回解析为 defaultPort 或下一个可用端口的 Promise。 如果端口被占用并且用户拒绝使用另一个端口，或者如果终端不是交互式的并且不能向用户提供选择，则解析为 null。

createCompiler(args: Object): WebpackCompiler

使用内置的有用消息为 WebpackDevServer 创建一个 Webpack 编译器实例。

args 对象接受许多属性：

• appName string: The name that will be printed to the terminal.
• config Object: The webpack configuration options to be provided to the webpack constructor.
• devSocket Object: Required if useTypeScript is true. This object should include errors and warnings which are functions accepting an array of errors or warnings emitted by the type checking. This is useful when running fork-ts-checker-webpack-plugin with async: true to report errors that are emitted after the webpack build is complete.
• urls Object: To provide the urls argument, use prepareUrls() described below.
• useYarn boolean: If true, yarn instructions will be emitted in the terminal instead of npm.
• useTypeScript boolean: If true, TypeScript type checking will be enabled. Be sure to provide the devSocket argument above if this is set to true.
• webpack function: A reference to the webpack constructor.

prepareProxy(proxySetting: string, appPublicFolder: string): Object

从 package.json 中的 proxy 设置创建一个 WebpackDevServer proxy 配置对象>。

prepareUrls(protocol: string, host: string, port: number): Object

返回具有开发服务器的本地和远程 URL 的对象。 将此对象传递给上述 createCompiler()。

webpackHotDevClient

这是 WebpackDevServer 的替代客户端，显示语法错误覆盖。

它目前仅支持 Webpack 3.x。

// Webpack development config
module.exports = {
  // ...
  entry: [
    // You can replace the line below with these two lines if you prefer the
    // stock client:
    // require.resolve('webpack-dev-server/client') + '?/',
    // require.resolve('webpack/hot/dev-server'),
    'react-dev-utils/webpackHotDevClient',
    'src/index',
  ],
  // ...
};

getCSSModuleLocalIdent(context: Object, localIdentName: String, localName: String, options: Object): string

为 CSS 模块创建一个类名，如果命名为 index.module.css，则使用文件名或文件夹名。

对于 MyFolder/MyComponent.module.css 和类 MyClass，输出将为 MyComponent.module_MyClass__[hash] 和类 MyClass，输出将为 MyFolder_MyClass__[hash]

const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');

// In your webpack config:
// ...
module: {
  rules: [
    {
      test: /\.module\.css$/,
      use: [
        require.resolve('style-loader'),
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent,
          },
        },
        {
          loader: require.resolve('postcss-loader'),
          options: postCSSLoaderOptions,
        },
      ],
    },
  ];
}

getCacheIdentifier(environment: string, packages: string[]): string

对于 MyFolder/ index.module.css 指定的环境和相关的包版本，例如，

var getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');

getCacheIdentifier('prod', ['react-dev-utils', 'chalk']); // # => 'prod:react-dev-utils@5.0.0:chalk@2.4.1'