misc(build): use rollup to create viewer report generator (#13407)

build/build-viewer.js

@@ -5,31 +5,37 @@
  */
 'use strict';
 
-const browserify = require('browserify');
+const rollup = require('rollup');
 const rollupPlugins = require('./rollup-plugins.js');
 const GhPagesApp = require('./gh-pages-app.js');
 const {LH_ROOT} = require('../root.js');
-const inlineFs = require('./plugins/browserify-inline-fs.js');
+
+async function buildReportGenerator() {
+  const bundle = await rollup.rollup({
+    input: 'report/generator/report-generator.js',
+    plugins: [
+      rollupPlugins.shim({
+        [`${LH_ROOT}/report/generator/flow-report-assets.js`]: 'export default {}',
+      }),
+      rollupPlugins.commonjs(),
+      rollupPlugins.nodeResolve(),
+      rollupPlugins.inlineFs({verbose: Boolean(process.env.DEBUG)}),
+    ],
+  });
+
+  const result = await bundle.generate({
+    format: 'umd',
+    name: 'ReportGenerator',
+  });
+  await bundle.close();
+  return result.output[0].code;
+}
 
 /**
  * Build viewer, optionally deploying to gh-pages if `--deploy` flag was set.
  */
 async function run() {
-  // JS bundle from browserified ReportGenerator.
-  const generatorFilename = `${LH_ROOT}/report/generator/report-generator.js`;
-  const generatorBrowserify = browserify(generatorFilename, {standalone: 'ReportGenerator'})
-    // Flow report is not used in report viewer, so don't include flow assets.
-    .ignore(require.resolve('../report/generator/flow-report-assets.js'))
-    // Transform `fs.readFileSync`, etc into inline strings.
-    .transform(inlineFs({verbose: Boolean(process.env.DEBUG)}));
-
-  /** @type {Promise<string>} */
-  const generatorJsPromise = new Promise((resolve, reject) => {
-    generatorBrowserify.bundle((err, src) => {
-      if (err) return reject(err);
-      resolve(src.toString());
-    });
-  });
+  const reportGeneratorJs = await buildReportGenerator();
 
   const app = new GhPagesApp({
     name: 'viewer',
@@ -39,7 +45,7 @@ async function run() {
       {path: 'styles/*'},
     ],
     javascripts: [
-      await generatorJsPromise,
+      reportGeneratorJs,
       {path: require.resolve('pako/dist/pako_inflate.js')},
       {path: 'src/main.js', rollup: true, rollupPlugins: [
         rollupPlugins.shim({