The React build system uses Rollup to transform source code across multiple packages into highly optimized bundles tailored for specific environments. This pipeline handles everything from Flow type removal and environment-specific "forking" to heavy optimization via the Closure Compiler and automated release channel management.
The build process is orchestrated by scripts/rollup/build.js scripts/rollup/build.js1-30 which consumes bundle definitions from scripts/rollup/bundles.js scripts/rollup/bundles.js69-88 The pipeline is designed to support a matrix of Bundle Types (target environments) and Module Types (architectural roles).
React categorizes its output into several distinct bundle types:
NODE_DEV, NODE_PROD, NODE_PROFILING scripts/rollup/bundles.js14-16ESM_DEV, ESM_PROD scripts/rollup/bundles.js12-13FB_WWW_DEV, FB_WWW_PROD, FB_WWW_PROFILING scripts/rollup/bundles.js19-21RN_OSS_* (Open Source) and RN_FB_* (Internal Meta) scripts/rollup/bundles.js22-27BROWSER_SCRIPT (direct browser usage), BUN_DEV/PROD scripts/rollup/bundles.js17-28 and CJS_DTS/ESM_DTS for TypeScript definitions scripts/rollup/bundles.js29-30Each bundle is assigned a moduleType which dictates how it is wrapped and what it includes:
react) that work across all platforms scripts/rollup/bundles.js58react-dom) that bundle the reconciler scripts/rollup/bundles.js60TestUtils) scripts/rollup/bundles.js62Build Pipeline Data Flow
Sources: scripts/rollup/build.js1-30 scripts/rollup/bundles.js56-65 scripts/rollup/packaging.js48-115 scripts/shared/inlinedHostConfigs.js9-60
A critical feature of the React build system is the ability to swap module implementations at build time based on the target environment. This is handled by the useForks plugin scripts/rollup/build.js22 and configured in scripts/rollup/forks.js scripts/rollup/forks.js52
The forks object maps a base file path to a resolver function. This function receives the current bundleType, entry point, and dependencies to determine the correct file to include scripts/rollup/forks.js55-89
Common forks include:
shared/ReactFeatureFlags to environment-specific files like .www.js or .native-fb.js scripts/rollup/forks.js134-184ReactSharedInternals differently for client vs. server entries to avoid cyclical dependencies scripts/rollup/forks.js55-89SchedulerFeatureFlags for internal Meta environments scripts/rollup/forks.js186-203Natural Language to Code Entity: Forking System
Sources: scripts/rollup/forks.js52 scripts/rollup/forks.js55-89 scripts/rollup/forks.js134-184 scripts/rollup/forks.js186-203 scripts/rollup/build.js22
React uses the Google Closure Compiler for production bundles to achieve aggressive minification and dead-code elimination.
transform-object-assign scripts/rollup/build.js130 and converts ESNext features to ES5 (for DEV bundles) scripts/rollup/build.js133-140transform-error-messages scripts/rollup/build.js167 to reduce bundle size.closure plugin scripts/rollup/build.js5 is applied to PROD and PROFILING bundle types. It handles constant folding and renaming of internal properties while preserving public APIs.if (__DEV__)) or module boundary logic defined in scripts/rollup/wrappers.js scripts/rollup/wrappers.js58-169Sources: scripts/rollup/build.js111-171 scripts/rollup/wrappers.js1-25
The build results are organized into a standard structure by scripts/rollup/packaging.js scripts/rollup/packaging.js1-16
The system generates artifacts in the ./build directory:
build/node_modules/[package]/cjs/: CommonJS builds for Node scripts/rollup/packaging.js51build/node_modules/[package]/esm/: ES Module builds scripts/rollup/packaging.js55build/facebook-www/: Flat files for the internal Meta www repository scripts/rollup/packaging.js67build/facebook-react-native/: Specialized builds for internal React Native scripts/rollup/packaging.js86Release channels are controlled by the RELEASE_CHANNEL environment variable scripts/rollup/bundles.js3 The script scripts/rollup/build-all-release-channels.js scripts/rollup/build-all-release-channels.js1-109 orchestrates builds for both stable and experimental channels, performing string replacements for versions using PLACEHOLDER_REACT_VERSION scripts/rollup/build-all-release-channels.js46-54
| Channel | __EXPERIMENTAL__ Flag | Purpose |
|---|---|---|
| Stable | false | Standard production-ready releases scripts/rollup/bundles.js5-8 |
| Experimental | true | Testing ground for upcoming features scripts/rollup/bundles.js5-8 |
Packaging Process Flow
Sources: scripts/rollup/packaging.js48-115 scripts/rollup/bundles.js3-8 scripts/rollup/packaging.js135-137 scripts/rollup/build-all-release-channels.js111-156
After the build, the system performs several validation steps to ensure the integrity of the generated code.
eslintrc.cjs.js, eslintrc.fb.js, eslintrc.rn.js) to ensure no forbidden globals or syntax were introduced during the build.dangerfile.js dangerfile.js1-37 calculates the gzip size of critical artifacts (like react-dom.production.js) and compares them against the base branch dangerfile.js43-52 It uses CRITICAL_THRESHOLD (2%) and SIGNIFICANCE_THRESHOLD (0.2%) to flag PRs that impact bundle size dangerfile.js41-42facebook-www and react-native are copied into the build directory to ensure compatibility with downstream internal systems scripts/rollup/packaging.js117-137Natural Language to Code Entity: Release and CI
Sources: dangerfile.js1-37 dangerfile.js41-42 dangerfile.js43-52 scripts/rollup/packaging.js117-137 ReactVersions.js1-64 scripts/rollup/build-all-release-channels.js1-109