scripts/rollup: add ESM_DEV, ESM_PROD targets (rough draft).

`node ./scripts/rollup/build.js ESM_DEV` now produces es module output
for react and react-dom. (ESM_PROD does not work yet, due to
interactions with closure compiler.)

discussion: facebook#10021

packages/react-dom/package.json

@@ -2,7 +2,7 @@
   "name": "react-dom",
   "version": "16.6.0",
   "description": "React package for working with the DOM.",
-  "main": "index.js",
+  "main": "esm/react-dom.development",
   "repository": "facebook/react",
   "keywords": [
     "react"
@@ -32,7 +32,8 @@
     "test-utils.js",
     "unstable-native-dependencies.js",
     "cjs/",
-    "umd/"
+    "umd/",
+    "esm/"
   ],
   "browser": {
     "./server.js": "./server.browser.js"

packages/react/package.json

@@ -13,9 +13,10 @@
     "README.md",
     "index.js",
     "cjs/",
-    "umd/"
+    "umd/",
+    "esm/"
   ],
-  "main": "index.js",
+  "main": "esm/react.development",
   "repository": "facebook/react",
   "engines": {
     "node": ">=0.10.0"

scripts/rollup/build.js

@@ -36,6 +36,8 @@ process.on('unhandledRejection', err => {
 });
 
 const {
+  ESM_DEV,
+  ESM_PROD,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -175,13 +177,20 @@ function getFormat(bundleType) {
     case RN_FB_PROD:
     case RN_FB_PROFILING:
       return `cjs`;
+    case ESM_DEV:
+    case ESM_PROD:
+      return `es`;
   }
 }
 
 function getFilename(name, globalName, bundleType) {
   // we do this to replace / to -, for react-dom/server
   name = name.replace('/', '-');
   switch (bundleType) {
+    case ESM_DEV:
+      return `${name}.development.mjs`;
+    case ESM_PROD:
+      return `${name}.production.min.mjs`;
     case UMD_DEV:
       return `${name}.development.js`;
     case UMD_PROD:
@@ -216,6 +225,7 @@ function isProductionBundleType(bundleType) {
     case FB_WWW_DEV:
     case RN_OSS_DEV:
     case RN_FB_DEV:
+    case ESM_DEV:
       return false;
     case UMD_PROD:
     case NODE_PROD:
@@ -227,6 +237,7 @@ function isProductionBundleType(bundleType) {
     case RN_OSS_PROFILING:
     case RN_FB_PROD:
     case RN_FB_PROFILING:
+    case ESM_PROD:
       return true;
     default:
       throw new Error(`Unknown type: ${bundleType}`);
@@ -245,6 +256,8 @@ function isProfilingBundleType(bundleType) {
     case RN_OSS_PROD:
     case UMD_DEV:
     case UMD_PROD:
+    case ESM_DEV:
+    case ESM_PROD:
       return false;
     case FB_WWW_PROFILING:
     case NODE_PROFILING:
@@ -590,6 +603,8 @@ async function buildEverything() {
   // and to avoid any potential race conditions.
   // eslint-disable-next-line no-for-of-loops/no-for-of-loops
   for (const bundle of Bundles.bundles) {
+    await createBundle(bundle, ESM_DEV);
+    await createBundle(bundle, ESM_PROD);
     await createBundle(bundle, UMD_DEV);
     await createBundle(bundle, UMD_PROD);
     await createBundle(bundle, UMD_PROFILING);

scripts/rollup/bundles.js

@@ -1,6 +1,8 @@
 'use strict';
 
 const bundleTypes = {
+  ESM_DEV: 'ESM_DEV',
+  ESM_PROD: 'ESM_PROD',
   UMD_DEV: 'UMD_DEV',
   UMD_PROD: 'UMD_PROD',
   UMD_PROFILING: 'UMD_PROFILING',
@@ -18,6 +20,8 @@ const bundleTypes = {
   RN_FB_PROFILING: 'RN_FB_PROFILING',
 };
 
+const ESM_DEV = bundleTypes.ESM_DEV;
+const ESM_PROD = bundleTypes.ESM_PROD;
 const UMD_DEV = bundleTypes.UMD_DEV;
 const UMD_PROD = bundleTypes.UMD_PROD;
 const UMD_PROFILING = bundleTypes.UMD_PROFILING;
@@ -58,6 +62,8 @@ const bundles = [
   {
     label: 'core',
     bundleTypes: [
+      ESM_DEV,
+      ESM_PROD,
       UMD_DEV,
       UMD_PROD,
       UMD_PROFILING,
@@ -77,6 +83,8 @@ const bundles = [
   {
     label: 'dom-client',
     bundleTypes: [
+      ESM_DEV,
+      ESM_PROD,
       UMD_DEV,
       UMD_PROD,
       UMD_PROFILING,

scripts/rollup/packaging.js

@@ -10,6 +10,8 @@ const {
 } = require('./utils');
 
 const {
+  ESM_DEV,
+  ESM_PROD,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -47,6 +49,9 @@ function getBundleOutputPaths(bundleType, filename, packageName) {
         `build/node_modules/${packageName}/umd/${filename}`,
         `build/dist/${filename}`,
       ];
+    case ESM_DEV:
+    case ESM_PROD:
+      return [`build/node_modules/${packageName}/esm/${filename}`];
     case FB_WWW_DEV:
     case FB_WWW_PROD:
     case FB_WWW_PROFILING:

scripts/rollup/wrappers.js

@@ -3,6 +3,8 @@
 const Bundles = require('./bundles');
 const reactVersion = require('../../package.json').version;
 
+const ESM_DEV = Bundles.bundleTypes.ESM_DEV;
+const ESM_PROD = Bundles.bundleTypes.ESM_PROD;
 const UMD_DEV = Bundles.bundleTypes.UMD_DEV;
 const UMD_PROD = Bundles.bundleTypes.UMD_PROD;
 const UMD_PROFILING = Bundles.bundleTypes.UMD_PROFILING;
@@ -27,6 +29,12 @@ const license = ` * Copyright (c) Facebook, Inc. and its affiliates.
  * LICENSE file in the root directory of this source tree.`;
 
 const wrappers = {
+  [ESM_DEV](source, globalName, filename, moduleType) {
+    return source;
+  },
+  [ESM_PROD](source, globalName, filename, moduleType) {
+    return source;
+  },
   /***************** UMD_DEV *****************/
   [UMD_DEV](source, globalName, filename, moduleType) {
     return `/** @license React v${reactVersion}