mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Alex Hunt
cd8f5d176a
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/38718 > NOTE: Replaces https://github.com/facebook/react-native/pull/38240 ## Context RFC: Decoupling Flipper from React Native core: https://github.com/react-native-community/discussions-and-proposals/pull/641 ## Changes To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo. The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel. These are available as build commands at the root of the repo: - `yarn build` — Builds all configured packages. Functionally, this: - Outputs a `dist/` directory with built files. - Rewrites package.json `"exports"` to update every `./src/*` reference to `./dist/*` (source of truth). - `scripts/build/babel-register.js` — Allows running all Node.js entry points from source, similar to the current setup in [facebook/metro](https://github.com/facebook/metro). (Example entry point file in this PR: `packages/dev-middleware/src/index.js`) Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`. ``` const buildConfig /*: BuildConfig */ = { // The packages to include for build and their build options packages: { 'dev-middleware': {target: 'node'}, }, }; ``` For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions. {F1043312771} **Differences from the Metro setup** - References (and compiles out) repo-local `scripts/build/babel-register.js` — removing need for an npm-published dependency. ## Current integration points - **CircleCI** — `yarn build` is added to the `build_npm_package` and `find_and_publish_bumped_packages` jobs. **New Node.js package(s) are not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR (and is actively being done in an internal commit stack). ### Alternative designs **Per-package config file** Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4). ``` "buildConfig": { "type": "node" }, ``` This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`. **Rollup** More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well). **Lerna and Nx** - Most sophisticated setup enabling caching and optimised cloud runs. - Probably the most likely thing we'll move towards at a later stage. Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D47760330 fbshipit-source-id: 38ec94708ce3d9946a197d80885781e9707c5841
72 lines
1.5 KiB
JavaScript
72 lines
1.5 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
* @format
|
|
* @oncall react_native
|
|
*/
|
|
|
|
/*::
|
|
import type {BabelCoreOptions} from '@babel/core';
|
|
|
|
export type BuildOptions = $ReadOnly<{
|
|
target: 'node',
|
|
}>;
|
|
|
|
export type BuildConfig = $ReadOnly<{
|
|
packages: $ReadOnly<{[packageName: string]: BuildOptions}>,
|
|
}>;
|
|
*/
|
|
|
|
const TARGET_NODE_VERSION = '18';
|
|
|
|
const buildConfig /*: BuildConfig */ = {
|
|
// The packages to include for build and their build options
|
|
packages: {
|
|
'dev-middleware': {target: 'node'},
|
|
},
|
|
};
|
|
|
|
function getBabelConfig(
|
|
packageName /*: $Keys<BuildConfig['packages']> */,
|
|
) /*: BabelCoreOptions */ {
|
|
const {target} = buildConfig.packages[packageName];
|
|
|
|
switch (target) {
|
|
case 'node':
|
|
return {
|
|
presets: [
|
|
'@babel/preset-flow',
|
|
[
|
|
'@babel/preset-env',
|
|
{
|
|
targets: {
|
|
node: TARGET_NODE_VERSION,
|
|
},
|
|
},
|
|
],
|
|
],
|
|
plugins: [
|
|
[
|
|
'transform-define',
|
|
{
|
|
'process.env.BUILD_EXCLUDE_BABEL_REGISTER': true,
|
|
},
|
|
],
|
|
[
|
|
'minify-dead-code-elimination',
|
|
{keepFnName: true, keepFnArgs: true, keepClassName: true},
|
|
],
|
|
],
|
|
};
|
|
}
|
|
}
|
|
|
|
module.exports = {
|
|
buildConfig,
|
|
getBabelConfig,
|
|
};
|