Compile ESM bundle to CJS using Babel instead of Rollup.

#4843 (comment)

Fixes #4843.

Author: benjamn

config/rollup.config.js

@@ -2,6 +2,10 @@ import nodeResolve from 'rollup-plugin-node-resolve';
 import typescriptPlugin from 'rollup-plugin-typescript2';
 import typescript from 'typescript';
 import path from 'path';
+import fs from 'fs';
+import { transformSync } from '@babel/core';
+import cjsModulesTransform from '@babel/plugin-transform-modules-commonjs';
+import umdModulesTransform from '@babel/plugin-transform-modules-umd';
 import invariantPlugin from 'rollup-plugin-invariant';
 import { terser as minify } from 'rollup-plugin-terser';
 
@@ -49,29 +53,14 @@ export function rollup({
     return './lib/' + outputPrefix + '.' + format + '.js';
   }
 
-  function convert(format) {
+  function fromSource(format) {
     return {
-      input: outputFile('esm'),
+      input,
       external,
       output: {
         file: outputFile(format),
         format,
         sourcemap: true,
-        name,
-        globals,
-      },
-      onwarn,
-    };
-  }
-
-  return [
-    {
-      input,
-      external,
-      output: {
-        file: outputFile('esm'),
-        format: 'esm',
-        sourcemap: true,
       },
       plugins: [
         nodeResolve({
@@ -90,14 +79,60 @@ export function rollup({
         }),
       ],
       onwarn,
-    },
-    convert('umd'),
-    convert('cjs'),
+    };
+  }
+
+  function fromESM(toFormat) {
+    return {
+      input: outputFile('esm'),
+      output: {
+        file: outputFile(toFormat),
+        format: 'esm',
+        sourcemap: false,
+      },
+      // The UMD bundle expects `this` to refer to the global object. By default
+      // Rollup replaces `this` with `undefined`, but this default behavior can
+      // be overridden with the `context` option.
+      context: 'this',
+      plugins: [{
+        transform(source, id) {
+          const output = transformSync(source, {
+            inputSourceMap: JSON.parse(fs.readFileSync(id + '.map')),
+            sourceMaps: true,
+            plugins: [
+              [toFormat === 'umd' ? umdModulesTransform : cjsModulesTransform, {
+                allowTopLevelThis: true,
+              }],
+            ],
+          });
+
+          // There doesn't seem to be any way to get Rollup to emit a source map
+          // that goes all the way back to the source file (rather than just to
+          // the bundle.esm.js intermediate file), so we pass sourcemap:false in
+          // the output options above, and manually write the CJS and UMD source
+          // maps here.
+          fs.writeFileSync(
+            outputFile(toFormat) + '.map',
+            JSON.stringify(output.map),
+          );
+
+          return {
+            code: output.code,
+          };
+        }
+      }],
+    }
+  }
+
+  return [
+    fromSource('esm'),
+    fromESM('cjs'),
+    fromESM('umd'),
     {
       input: outputFile('cjs'),
       output: {
         file: outputFile('cjs.min'),
-        format: 'cjs',
+        format: 'esm',
       },
       plugins: [
         minify({

package-lock.json

@@ -60,6 +60,9 @@
     "graphql-anywhere": "file:packages/graphql-anywhere"
   },
   "devDependencies": {
+    "@babel/core": "7.4.5",
+    "@babel/plugin-transform-modules-commonjs": "7.4.4",
+    "@babel/plugin-transform-modules-umd": "7.2.0",
     "@condenast/bundlesize": "0.18.1",
     "@octokit/rest": "16.27.3",
     "@types/benchmark": "1.0.31",