build() — react Function Reference

Architecture documentation for the build() function in build.js from the react codebase.

Function javascript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ build() — react Function Reference

Dependency Diagram

graph TD
  85bfd344_88f5_a361_4b0a_f3114381e9ca["build()"]
  67a0a2e0_bd49_0c73_8f90_c9d35aa3cb60["build.js"]
  85bfd344_88f5_a361_4b0a_f3114381e9ca -->|defined in| 67a0a2e0_bd49_0c73_8f90_c9d35aa3cb60
  b8a74eb6_bc15_fef1_125a_c2ace8297b67["main()"]
  b8a74eb6_bc15_fef1_125a_c2ace8297b67 -->|calls| 85bfd344_88f5_a361_4b0a_f3114381e9ca
  style 85bfd344_88f5_a361_4b0a_f3114381e9ca fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-extensions/build.js lines 55–134

const build = async (tempPath, manifestPath, envExtension = {}) => {
  const binPath = join(tempPath, 'bin');
  const zipPath = join(tempPath, 'zip');
  const mergedEnv = {...process.env, ...envExtension};

  const webpackPath = join(__dirname, 'node_modules', '.bin', 'webpack');
  execSync(
    `${webpackPath} --config webpack.config.js --output-path ${binPath}`,
    {
      cwd: __dirname,
      env: mergedEnv,
      stdio: 'inherit',
    },
  );

  // Make temp dir
  await ensureDir(zipPath);

  const copiedManifestPath = join(zipPath, 'manifest.json');

  let webpackStatsFilePath = null;
  // Copy unbuilt source files to zip dir to be packaged:
  await copy(binPath, join(zipPath, 'build'), {
    filter: filePath => {
      if (basename(filePath).startsWith('webpack-stats.')) {
        webpackStatsFilePath = filePath;
        // The ZIP is the actual extension and doesn't need this metadata.
        return false;
      }
      return true;
    },
  });
  if (webpackStatsFilePath !== null) {
    await copy(
      webpackStatsFilePath,
      join(tempPath, basename(webpackStatsFilePath)),
    );
    webpackStatsFilePath = join(tempPath, basename(webpackStatsFilePath));
  }
  await copy(manifestPath, copiedManifestPath);
  await Promise.all(
    STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file))),
  );

  const commit = getGitCommit();
  const dateString = new Date().toLocaleDateString();
  const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
  const versionDateString = `${manifest.version} (${dateString})`;
  if (manifest.version_name) {
    manifest.version_name = versionDateString;
  }
  manifest.description += `\n\nCreated from revision ${commit} on ${dateString}.`;

  if (process.env.NODE_ENV === 'development') {
    // When building the local development version of the
    // extension we want to be able to have a stable extension ID
    // for the local build (in order to be able to reliably detect
    // duplicate installations of DevTools).
    // By specifying a key in the built manifest.json file,
    // we can make it so the generated extension ID is stable.
    // For more details see the docs here: https://developer.chrome.com/docs/extensions/mv2/manifest/key/
    manifest.key = 'reactdevtoolslocalbuilduniquekey';
  }

  writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));

  // Pack the extension
  const archive = archiver('zip', {zlib: {level: 9}});
  const zipStream = createWriteStream(join(tempPath, 'ReactDevTools.zip'));
  await new Promise((resolvePromise, rejectPromise) => {
    archive
      .directory(zipPath, false)
      .on('error', err => rejectPromise(err))
      .pipe(zipStream);
    archive.finalize();
    zipStream.on('close', () => resolvePromise());
  });

  return webpackStatsFilePath;
};