Build System & Scripts
Overview
React uses a custom build system to manage its monorepo architecture, transforming source code into optimized artifacts for multiple environments. The system is primarily powered by Rollup, which handles bundling for various module systems (CommonJS, ESM, and UMD) and release channels.
Core Build Commands
The primary entry point for building React from source is via yarn.
Full Build
To generate build artifacts for all packages:
yarn build
This command populates the build/ directory with categorized subdirectories:
node_modules: Packages ready for local linking or publication.dist: UMD bundles for browser usage.
Targeted Builds
You can build specific packages or use flags to restrict the build to certain environments:
# Build only specific packages (e.g., react and react-dom)
yarn build react,react-dom
# Build for a specific release channel
yarn build --type=NODE
Release Channels
React uses release channels to manage the stability of new features. The build system configures the compiler and feature flags based on the target channel.
| Channel | Description | Usage |
| :--- | :--- | :--- |
| stable | The current version on npm. | Production applications. |
| canary | Features adopted by Meta and early adopters. | Frameworks like Next.js or Remix. |
| experimental | APIs in active development (e.g., upcoming Research). | Testing and feedback only. |
To build for a specific channel, use the --type flag during the build process.
React Compiler Tooling
The React Compiler (Babel plugin) has its own specific build and validation requirements. The build system ensures the compiler is correctly transpiled and tested against its internal Intermediate Representation (HIR).
link-compiler.sh
link-compiler.sh is an internal utility script used to link the local version of the React Compiler into a separate project for testing. This is essential for verifying compiler behavior on real-world components before a full release.
Usage:
./scripts/compiler/link-compiler.sh /path/to/target/project
This script automates the process of:
- Building the
babel-plugin-react-compilerpackage. - Using
yarn linkornpm linkto point the target project to the local build artifacts.
Validation Scripts
The compiler includes specific validation passes that can be triggered during development:
validateNoCapitalizedCalls: Ensures that components are not invoked as standard functions.pruneNonEscapingScopes: Optimizes the build by removing unnecessary memoization scopes for values that do not leave the local function scope.
Rollup Configuration
The build configuration is centralized in scripts/rollup/config.js. It defines how each package is bundled based on its intended environment.
Bundle Types
React produces several types of bundles:
- NODE_CJS/NODE_ESM: Optimized for Node.js environments and modern bundlers (Webpack, Vite).
- BROWSER: UMD bundles containing
developmentandproduction.minversions. - FB: Specific bundles optimized for the internal Meta infrastructure.
Environment Config
For the React Compiler specifically, the build system references an EnvironmentConfig object to determine how the compiler should treat various patterns:
export type EnvironmentConfig = {
/**
* Validates that functions beginning with a capital letter are
* used only as JSX components.
*/
validateNoCapitalizedCalls?: Array<string>;
/**
* A regex pattern to identify custom hooks (e.g., "^use").
*/
hookPattern?: string;
// ...additional configuration options
};
CI and Automation
React utilizes GitHub Actions to automate build verification across different platforms.
- Runtime Build and Test: Runs the full suite of unit tests against the generated build artifacts.
- Compiler TypeScript: Specifically validates the type safety of the React Compiler source code and its Babel integration.
- Fixture Testing: The compiler uses a fixture-based testing system (located in
src/__tests__/fixtures) to compare input source code against expected output HIR and reactive scopes.