Build: Add --no-babel flag (#12153)

scripts/build-website.mjs

@@ -10,7 +10,6 @@ import {
   PROJECT_ROOT,
   DIST_DIR,
   WEBSITE_DIR,
-  readJson,
   writeJson,
   copyFile,
   writeFile,
@@ -32,18 +31,20 @@ const PLAYGROUND_PRETTIER_DIR = path.join(WEBSITE_DIR, "static/lib");
 async function buildPrettier() {
   // --- Build prettier for PR ---
   const packageJsonFile = path.join(PROJECT_ROOT, "package.json");
-  const content = await fs.readFile(packageJsonFile);
-  const packageJson = await readJson(packageJsonFile);
+  const packageJsonContent = await fs.readFile(packageJsonFile);
+  const packageJson = JSON.parse(packageJsonContent);
   await writeJson(packageJsonFile, {
     ...packageJson,
     version: `999.999.999-pr.${process.env.REVIEW_ID}`,
   });
 
   try {
-    await runYarn("build", ["--playground"], { cwd: PROJECT_ROOT });
+    await runYarn("build", ["--playground", "--no-babel"], {
+      cwd: PROJECT_ROOT,
+    });
   } finally {
     // restore
-    await writeFile(packageJsonFile, content);
+    await writeFile(packageJsonFile, packageJsonContent);
   }
 }
 

scripts/build/README.md

@@ -53,3 +53,21 @@ Disable minify files:
 ```sh
 yarn build --file=parser-babel.js --no-minify
 ```
+
+### `--no-babel`
+
+Currently, we need babel to transform/shim following new language features:
+
+- `Array#flat()` for Node.js 10
+- `Array#flatMap()` for Node.js 10
+- `Object.fromEntries()` for Node.js 10
+
+When debugging the build script, we may want skip this step, so the build process can be faster.
+
+Playground use this flag to speed up the build too.
+
+`--babel` have no effect, don't use.
+
+```sh
+yarn build --file=index.js --no-babel
+```

scripts/build/build.mjs

@@ -136,8 +136,12 @@ async function preparePackage() {
 
 async function run(params) {
   const shouldPreparePackage =
+    !params.playground &&
+    !params.file &&
+    params.minify === null &&
+    params.babel !== false;
+  const shouldSaveBundledPackagesLicenses =
     !params.playground && !params.file && params.minify === null;
-  const shouldSaveBundledPackagesLicenses = shouldPreparePackage;
 
   let configs = bundleConfigs;
   if (params.file) {
@@ -172,8 +176,8 @@ async function run(params) {
 
 run(
   minimist(process.argv.slice(2), {
-    boolean: ["playground", "print-size", "minify"],
+    boolean: ["playground", "print-size", "minify", "babel"],
     string: ["file"],
-    default: { playground: false, printSize: false, minify: null },
+    default: { playground: false, printSize: false, minify: null, babel: true },
   })
 );

scripts/build/bundler.mjs

@@ -66,7 +66,7 @@ function getBabelConfig(bundle) {
   return config;
 }
 
-async function* getEsbuildOptions(bundle, options) {
+async function* getEsbuildOptions(bundle, buildOptions) {
   const replaceStrings = {
     // `tslib` exports global variables
     "createExporter(root": "createExporter({}",
@@ -136,7 +136,7 @@ async function* getEsbuildOptions(bundle, options) {
     };
   }
 
-  let shouldMinify = options.minify;
+  let shouldMinify = buildOptions.minify;
   if (typeof shouldMinify !== "boolean") {
     shouldMinify = bundle.minify !== false && bundle.target === "universal";
   }
@@ -155,12 +155,12 @@ async function* getEsbuildOptions(bundle, options) {
         // TODO[@fisker]: Use RegExp when possible
         pattern: Object.entries({ ...replaceStrings, ...bundle.replace }),
       }),
-      options.onLicenseFound &&
+      buildOptions.onLicenseFound &&
         esbuildPluginLicense({
           cwd: PROJECT_ROOT,
           thirdParty: {
             includePrivate: true,
-            output: options.onLicenseFound,
+            output: buildOptions.onLicenseFound,
           },
         }),
     ].filter(Boolean),
@@ -187,7 +187,7 @@ async function* getEsbuildOptions(bundle, options) {
       format: "umd",
     };
 
-    if (!bundle.format && !options.playground) {
+    if (!bundle.format && !buildOptions.playground) {
       yield {
         ...esbuildOptions,
         outfile: path.join(
@@ -213,7 +213,12 @@ async function* getEsbuildOptions(bundle, options) {
   }
 }
 
-async function runBuild(bundle, esbuildOptions) {
+async function runBuild(bundle, esbuildOptions, buildOptions) {
+  if (!buildOptions.babel) {
+    await esbuild.build(esbuildOptions);
+    return;
+  }
+
   const { format, plugins, outfile } = esbuildOptions;
 
   await esbuild.build({
@@ -239,17 +244,16 @@ async function runBuild(bundle, esbuildOptions) {
   });
 }
 
-async function createBundle(bundle, options) {
+async function createBundle(bundle, buildOptions) {
   if (
-    options.playground &&
+    buildOptions.playground &&
     (bundle.target !== "universal" || bundle.output === "doc.js")
   ) {
     return { skipped: true };
   }
 
-  const esbuildOptions = getEsbuildOptions(bundle, options);
-  for await (const options of esbuildOptions) {
-    await runBuild(bundle, options);
+  for await (const esbuildOptions of getEsbuildOptions(bundle, buildOptions)) {
+    await runBuild(bundle, esbuildOptions, buildOptions);
   }
 
   return { bundled: true };