Files
react-native/scripts/build/build.js
T
Alex Hunt cd8f5d176a Add shared monorepo build setup (#38718)
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
2023-08-03 04:42:30 -07:00

187 lines
4.8 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
*/
const babel = require('@babel/core');
const {parseArgs} = require('@pkgjs/parseargs');
const chalk = require('chalk');
const glob = require('glob');
const micromatch = require('micromatch');
const fs = require('fs');
const path = require('path');
const prettier = require('prettier');
const {buildConfig, getBabelConfig} = require('./config');
const PACKAGES_DIR /*: string */ = path.resolve(__dirname, '../../packages');
const SRC_DIR = 'src';
const BUILD_DIR = 'dist';
const JS_FILES_PATTERN = '**/*.js';
const IGNORE_PATTERN = '**/__{tests,mocks,fixtures}__/**';
const config = {
allowPositionals: true,
options: {
help: {type: 'boolean'},
},
};
function build() {
const {
positionals: packageNames,
values: {help},
} = parseArgs(config);
if (help) {
console.log(`
Usage: node ./scripts/build/build.js <packages>
Build packages (shared monorepo build setup).
By default, builds all packages defined in ./scripts/build/config.js. If a
a package list is provided, builds only those specified.
`);
process.exitCode = 0;
return;
}
console.log('\n' + chalk.bold.inverse('Building packages') + '\n');
if (packageNames.length) {
packageNames
.filter(packageName => packageName in buildConfig.packages)
.forEach(buildPackage);
} else {
Object.keys(buildConfig.packages).forEach(buildPackage);
}
process.exitCode = 0;
}
function buildPackage(packageName /*: string */) {
const files = glob.sync(
path.resolve(PACKAGES_DIR, packageName, SRC_DIR, '**/*'),
{nodir: true},
);
const packageJsonPath = path.join(PACKAGES_DIR, packageName, 'package.json');
process.stdout.write(
`${packageName} ${chalk.dim('.').repeat(72 - packageName.length)} `,
);
files.forEach(file => buildFile(path.normalize(file), true));
rewritePackageExports(packageJsonPath);
process.stdout.write(chalk.reset.inverse.bold.green(' DONE ') + '\n');
}
function buildFile(file /*: string */, silent /*: boolean */ = false) {
const packageName = getPackageName(file);
const buildPath = getBuildPath(file);
const logResult = ({copied, desc} /*: {copied: boolean, desc?: string} */) =>
silent ||
console.log(
chalk.dim(' - ') +
path.relative(PACKAGES_DIR, file) +
(copied ? ' -> ' + path.relative(PACKAGES_DIR, buildPath) : ' ') +
(desc != null ? ' (' + desc + ')' : ''),
);
if (micromatch.isMatch(file, IGNORE_PATTERN)) {
logResult({copied: false, desc: 'ignore'});
return;
}
fs.mkdirSync(path.dirname(buildPath), {recursive: true});
if (!micromatch.isMatch(file, JS_FILES_PATTERN)) {
fs.copyFileSync(file, buildPath);
logResult({copied: true, desc: 'copy'});
} else {
const transformed = prettier.format(
babel.transformFileSync(file, getBabelConfig(packageName)).code,
{parser: 'babel'},
);
fs.writeFileSync(buildPath, transformed);
if (/@flow/.test(fs.readFileSync(file, 'utf-8'))) {
fs.copyFileSync(file, buildPath + '.flow');
}
logResult({copied: true});
}
}
function getPackageName(file /*: string */) /*: string */ {
return path.relative(PACKAGES_DIR, file).split(path.sep)[0];
}
function getBuildPath(file /*: string */) /*: string */ {
const packageDir = path.join(PACKAGES_DIR, getPackageName(file));
return path.join(
packageDir,
file.replace(path.join(packageDir, SRC_DIR), BUILD_DIR),
);
}
function rewritePackageExports(packageJsonPath /*: string */) {
const pkg = JSON.parse(fs.readFileSync(packageJsonPath, {encoding: 'utf8'}));
if (pkg.exports == null) {
return;
}
pkg.exports = rewriteExportsField(pkg.exports);
fs.writeFileSync(
packageJsonPath,
prettier.format(JSON.stringify(pkg), {parser: 'json'}),
);
}
/*::
type ExportsField = {
[subpath: string]: ExportsField | string,
} | string;
*/
function rewriteExportsField(
exportsField /*: ExportsField */,
) /*: ExportsField */ {
if (typeof exportsField === 'string') {
return rewriteExportsTarget(exportsField);
}
for (const key in exportsField) {
if (typeof exportsField[key] === 'string') {
exportsField[key] = rewriteExportsTarget(exportsField[key]);
} else if (typeof exportsField[key] === 'object') {
exportsField[key] = rewriteExportsField(exportsField[key]);
}
}
return exportsField;
}
function rewriteExportsTarget(target /*: string */) /*: string */ {
return target.replace('./' + SRC_DIR + '/', './' + BUILD_DIR + '/');
}
module.exports = {
buildFile,
getBuildPath,
BUILD_DIR,
PACKAGES_DIR,
SRC_DIR,
};
if (require.main === module) {
build();
}