Use rollup for browser builds

package.json

@@ -5,6 +5,7 @@
     "ansi-styles": "^3.0.0",
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.13.0",
     "babel-plugin-transform-async-to-generator": "^6.16.0",
     "babel-plugin-transform-es2015-destructuring": "^6.23.0",
@@ -44,6 +45,14 @@
     "react-test-renderer": "^15.5.4",
     "regenerator-runtime": "^0.10.3",
     "rimraf": "^2.5.4",
+    "rollup": "^0.41.6",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-flow": "^1.1.1",
+    "rollup-plugin-json": "^2.1.1",
+    "rollup-plugin-node-builtins": "^2.1.1",
+    "rollup-plugin-node-globals": "^1.1.0",
+    "rollup-plugin-node-resolve": "^3.0.0",
     "slash": "^1.0.0",
     "strip-ansi": "^3.0.1",
     "typescript": "^2.2.2"

scripts/browserBuild.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2014, Facebook, Inc. All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const rollup = require('rollup').rollup;
+const rollupResolve = require('rollup-plugin-node-resolve');
+const rollupCommonjs = require('rollup-plugin-commonjs');
+const rollupBuiltins = require('rollup-plugin-node-builtins');
+const rollupGlobals = require('rollup-plugin-node-globals');
+const rollupJson = require('rollup-plugin-json');
+const rollupBabel = require('rollup-plugin-babel');
+const rollupFlow = require('rollup-plugin-flow');
+
+const babelNodeOptions = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, '..', '.babelrc'), 'utf8')
+);
+const babelEs5Options = Object.assign({}, babelNodeOptions, {
+  babelrc: false,
+  exclude: 'node_modules/**',
+  plugins: [
+    ...babelNodeOptions.plugins,
+    'external-helpers',
+    'transform-runtime',
+  ],
+  presets: [
+    [
+      'env',
+      {
+        modules: false,
+      },
+    ],
+  ],
+  runtimeHelpers: true,
+});
+
+function browserBuild(entryPath, destination) {
+  return rollup({
+    entry: entryPath,
+    onwarn: () => {},
+    plugins: [
+      rollupFlow(),
+      rollupJson(),
+      rollupCommonjs(),
+      rollupBabel(babelEs5Options),
+      rollupGlobals(),
+      rollupBuiltins(),
+      rollupResolve(),
+    ],
+    useStrict: false,
+  }).then(bundle => {
+    return bundle.write({
+      dest: destination,
+      format: 'cjs',
+    });
+  });
+}
+
+module.exports = browserBuild;

scripts/build.js

@@ -29,6 +29,7 @@ const chalk = require('chalk');
 const micromatch = require('micromatch');
 
 const getPackages = require('./_getPackages');
+const browserBuild = require('./browserBuild');
 
 const SRC_DIR = 'src';
 const BUILD_DIR = 'build';
@@ -41,12 +42,6 @@ const babelNodeOptions = JSON.parse(
   fs.readFileSync(path.resolve(__dirname, '..', '.babelrc'), 'utf8')
 );
 babelNodeOptions.babelrc = false;
-const babelEs5Options = Object.assign(
-  {},
-  babelNodeOptions,
-  {presets: 'env'},
-  {plugins: [...babelNodeOptions.plugins, 'transform-runtime']}
-);
 
 const fixedWidth = str => {
   const WIDTH = 80;
@@ -70,7 +65,7 @@ function getBuildPath(file, buildFolder) {
   return path.resolve(pkgBuildPath, relativeToSrcPath);
 }
 
-function buildPackage(p) {
+function buildNodePackage(p) {
   const srcDir = path.resolve(p, SRC_DIR);
   const pattern = path.resolve(srcDir, '**/*');
   const files = glob.sync(pattern, {nodir: true});
@@ -81,29 +76,31 @@ function buildPackage(p) {
   process.stdout.write(`[  ${chalk.green('OK')}  ]\n`);
 }
 
-function buildFile(file, silent) {
-  buildFileFor(file, silent, 'node');
-
-  const pkgJsonPath = path.resolve(
-    PACKAGES_DIR,
-    getPackageName(file),
-    'package.json'
-  );
-  const {browser} = require(pkgJsonPath);
-  if (browser) {
-    if (browser.indexOf(BUILD_ES5_DIR) !== 0) {
-      throw new Error(
-        `browser field for ${pkgJsonPath} should start with "${BUILD_ES5_DIR}"`
+async function buildBrowserPackages(packages) {
+  for (const p of packages) {
+    const srcDir = path.resolve(p, SRC_DIR);
+    const pkgJsonPath = path.resolve(p, 'package.json');
+
+    const {browser} = require(pkgJsonPath);
+    if (browser) {
+      if (browser.indexOf(BUILD_ES5_DIR) !== 0) {
+        throw new Error(
+          `browser field for ${pkgJsonPath} should start with "${BUILD_ES5_DIR}"`
+        );
+      }
+      process.stdout.write(fixedWidth(`${path.basename(p)}\n`));
+      await browserBuild(
+        path.resolve(srcDir, 'index.js'),
+        path.resolve(p, browser)
       );
+      process.stdout.write(`[  ${chalk.green('OK')}  ]\n`);
     }
-    buildFileFor(file, silent, 'es5');
   }
+  process.stdout.write('\n');
 }
 
-function buildFileFor(file, silent, env) {
-  const buildDir = env === 'es5' ? BUILD_ES5_DIR : BUILD_DIR;
-  const destPath = getBuildPath(file, buildDir);
-  const babelOptions = env === 'es5' ? babelEs5Options : babelNodeOptions;
+function buildFile(file, silent) {
+  const destPath = getBuildPath(file, BUILD_DIR);
 
   mkdirp.sync(path.dirname(destPath));
   if (micromatch.isMatch(file, IGNORE_PATTERN)) {
@@ -125,7 +122,7 @@ function buildFileFor(file, silent, env) {
           '\n'
       );
   } else {
-    const transformed = babel.transformFileSync(file, babelOptions).code;
+    const transformed = babel.transformFileSync(file, babelNodeOptions).code;
     fs.writeFileSync(destPath, transformed);
     silent ||
       process.stdout.write(
@@ -143,7 +140,11 @@ const files = process.argv.slice(2);
 if (files.length) {
   files.forEach(buildFile);
 } else {
-  process.stdout.write(chalk.bold.inverse('Building packages\n'));
-  getPackages().forEach(buildPackage);
+  const packages = getPackages();
+  process.stdout.write(chalk.bold.inverse('Building node packages\n'));
+  packages.forEach(buildNodePackage);
   process.stdout.write('\n');
+
+  process.stdout.write(chalk.bold.inverse('Building browser packages\n'));
+  buildBrowserPackages(packages);
 }