react-dev-utils
This package includes some utilities used by Create React App. Please refer to its documentation:
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
These utilities come by default with Create React App, which includes it by default. You don’t need to install it separately in Create React App projects.
Usage Outside of Create React App
If you don’t use Create React App, or if you ejected, you may keep using these utilities. Their development will be aligned with Create React App, so major versions of these utilities may come out relatively often. Feel free to fork or copy and paste them into your projects if you’d like to have more control over them, or feel free to use the old versions. Not all of them are React-specific, but we might make some of them more React-specific in the future.
Entry Points
There is no single entry point. You can only import individual top-level modules.
new InterpolateHtmlPlugin(htmlWebpackPlugin: HtmlWebpackPlugin, replacements: {[key:string]: string})
new InterpolateHtmlPlugin(htmlWebpackPlugin: HtmlWebpackPlugin, replacements: {[key:string]: string})
This webpack plugin lets us interpolate custom variables into index.html
.
It works in tandem with HtmlWebpackPlugin 2.x via its events.
new InlineChunkHtmlPlugin(htmlWebpackPlugin: HtmlWebpackPlugin, tests: Regex[])
new InlineChunkHtmlPlugin(htmlWebpackPlugin: HtmlWebpackPlugin, tests: Regex[])
This webpack plugin inlines script chunks into index.html
.
It works in tandem with HtmlWebpackPlugin 4.x.
new ModuleScopePlugin(appSrc: string | string[], allowedFiles?: string[])
new ModuleScopePlugin(appSrc: string | string[], allowedFiles?: string[])
This webpack plugin ensures that relative imports from app's source directories don't reach outside of it.
new WatchMissingNodeModulesPlugin(nodeModulesPath: string)
new WatchMissingNodeModulesPlugin(nodeModulesPath: string)
This webpack plugin ensures npm install <library>
forces a project rebuild.
We’re not sure why this isn't webpack's default behavior.
See #186 for details.
checkRequiredFiles(files: Array<string>): boolean
checkRequiredFiles(files: Array<string>): boolean
Makes sure that all passed files exist.
Filenames are expected to be absolute.
If a file is not found, prints a warning message and returns false
.
clearConsole(): void
clearConsole(): void
Clears the console, hopefully in a cross-platform way.
eslintFormatter(results: Object): string
eslintFormatter(results: Object): string
This is our custom ESLint formatter that integrates well with Create React App console output. You can use the default one instead if you prefer so.
FileSizeReporter
FileSizeReporter
measureFileSizesBeforeBuild(buildFolder: string): Promise<OpaqueFileSizes>
Captures JS and CSS asset sizes inside the passed buildFolder
. Save the result value to compare it after the build.
printFileSizesAfterBuild(webpackStats: WebpackStats, previousFileSizes: OpaqueFileSizes, buildFolder: string, maxBundleGzipSize?: number, maxChunkGzipSize?: number)
Prints the JS and CSS asset sizes after the build, and includes a size comparison with previousFileSizes
that were captured earlier using measureFileSizesBeforeBuild()
. maxBundleGzipSize
and maxChunkGzipSizemay
may optionally be specified to display a warning when the main bundle or a chunk exceeds the specified size (in bytes).
formatWebpackMessages({errors: Array<string>, warnings: Array<string>}): {errors: Array<string>, warnings: Array<string>}
formatWebpackMessages({errors: Array<string>, warnings: Array<string>}): {errors: Array<string>, warnings: Array<string>}
Extracts and prettifies warning and error messages from webpack stats object.
printBuildError(error: Object): void
printBuildError(error: Object): void
Prettify some known build errors. Pass an Error object to log a prettified error message in the console.
getProcessForPort(port: number): string
getProcessForPort(port: number): string
Finds the currently running process on port
. Returns a string containing the name and directory, e.g.,
launchEditor(fileName: string, lineNumber: number): void
launchEditor(fileName: string, lineNumber: number): void
On macOS, tries to find a known running editor process and opens the file in it. It can also be explicitly configured by REACT_EDITOR
, VISUAL
, or EDITOR
environment variables. For example, you can put REACT_EDITOR=atom
in your .env.local
file, and Create React App will respect that.
noopServiceWorkerMiddleware(servedPath: string): ExpressMiddleware
noopServiceWorkerMiddleware(servedPath: string): ExpressMiddleware
Returns Express middleware that serves a ${servedPath}/service-worker.js
that resets any previously set service worker configuration. Useful for development.
redirectServedPathMiddleware(servedPath: string): ExpressMiddleware
redirectServedPathMiddleware(servedPath: string): ExpressMiddleware
Returns Express middleware that redirects to ${servedPath}/${req.path}
, if req.url
does not start with servedPath
. Useful for development.
openBrowser(url: string): boolean
openBrowser(url: string): boolean
Attempts to open the browser with a given URL. On Mac OS X, attempts to reuse an existing Chrome tab via AppleScript. Otherwise, falls back to opn behavior.
printHostingInstructions(appPackage: Object, publicUrl: string, publicPath: string, buildFolder: string, useYarn: boolean): void
printHostingInstructions(appPackage: Object, publicUrl: string, publicPath: string, buildFolder: string, useYarn: boolean): void
Prints hosting instructions after the project is built.
Pass your parsed package.json
object as appPackage
, your the URL where you plan to host the app as publicUrl
, output.publicPath
from your webpack configuration as publicPath
, the buildFolder
name, and whether to useYarn
in instructions.
WebpackDevServerUtils
WebpackDevServerUtils
choosePort(host: string, defaultPort: number): Promise<number | null>
Returns a Promise resolving to either defaultPort
or next available port if the user confirms it is okay to do. If the port is taken and the user has refused to use another port, or if the terminal is not interactive and can’t present user with the choice, resolves to null
.
createCompiler(args: Object): WebpackCompiler
Creates a webpack compiler instance for WebpackDevServer with built-in helpful messages.
The args
object accepts a number of properties:
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 ifuseTypeScript
istrue
. This object should includeerrors
andwarnings
which are functions accepting an array of errors or warnings emitted by the type checking. This is useful when runningfork-ts-checker-webpack-plugin
withasync: true
to report errors that are emitted after the webpack build is complete.urls
Object
: To provide theurls
argument, useprepareUrls()
described below.useYarn
boolean
: Iftrue
, yarn instructions will be emitted in the terminal instead of npm.useTypeScript
boolean
: Iftrue
, TypeScript type checking will be enabled. Be sure to provide thedevSocket
argument above if this is set totrue
.tscCompileOnError
boolean
: Iftrue
, errors in TypeScript type checking will not prevent start script from running app, and will not cause build script to exit unsuccessfully. Also downgrades all TypeScript type checking error messages to warning messages.webpack
function
: A reference to the webpack constructor.
prepareProxy(proxySetting: string, appPublicFolder: string, servedPathname: string): Object
Creates a WebpackDevServer proxy
configuration object from the proxy
setting in package.json
.
prepareUrls(protocol: string, host: string, port: number, pathname: string = '/'): Object
Returns an object with local and remote URLs for the development server. Pass this object to createCompiler()
described above.
webpackHotDevClient
webpackHotDevClient
This is an alternative client for WebpackDevServer that shows a syntax error overlay.
It currently supports only webpack 3.x.
getCSSModuleLocalIdent(context: Object, localIdentName: String, localName: String, options: Object): string
getCSSModuleLocalIdent(context: Object, localIdentName: String, localName: String, options: Object): string
Creates a class name for CSS Modules that uses either the filename or folder name if named index.module.css
.
For MyFolder/MyComponent.module.css
and class MyClass
the output will be MyComponent.module_MyClass__[hash]
For MyFolder/index.module.css
and class MyClass
the output will be MyFolder_MyClass__[hash]
getCacheIdentifier(environment: string, packages: string[]): string
getCacheIdentifier(environment: string, packages: string[]): string
Returns a cache identifier (string) consisting of the specified environment and related package versions, e.g.,
Last updated