Correctly bundle up for browser globals (#7661)

* use webpack over browserify for browser test

* use webpack over rollup for browser build

Author: SimenB

karma.conf.js

@@ -9,9 +9,17 @@ module.exports = config => {
   config.set({
     browsers: ['ChromeHeadless'],
     files: ['e2e/browser-support/browserTest.js'],
-    frameworks: ['mocha', 'browserify'],
+    frameworks: ['mocha'],
     preprocessors: {
-      'e2e/browser-support/browserTest.js': ['browserify'],
+      'e2e/browser-support/browserTest.js': ['webpack'],
+    },
+    webpack: {
+      mode: 'development',
+    },
+    webpackMiddleware: {
+      // webpack-dev-middleware configuration
+      // i. e.
+      stats: 'errors-only',
     },
   });
 };

package.json

@@ -10,7 +10,8 @@
     "ansi-regex": "^4.0.0",
     "ansi-styles": "^3.2.0",
     "babel-eslint": "^9.0.0",
-    "browserify": "^16.1.0",
+    "babel-loader": "^8.0.5",
+    "camelcase": "^5.0.0",
     "chalk": "^2.0.1",
     "codecov": "^3.0.0",
     "debug": "^4.0.1",
@@ -38,9 +39,9 @@
     "jest-snapshot-serializer-raw": "^1.1.0",
     "jquery": "^3.2.1",
     "karma": "^3.1.4",
-    "karma-browserify": "^6.0.0",
     "karma-chrome-launcher": "^2.1.1",
     "karma-mocha": "^1.3.0",
+    "karma-webpack": "4.0.0-rc.5",
     "left-pad": "^1.1.1",
     "lerna": "3.10.5",
     "micromatch": "^3.1.10",
@@ -54,18 +55,11 @@
     "readable-stream": "^3.0.3",
     "resolve": "^1.4.0",
     "rimraf": "^2.6.2",
-    "rollup": "^1.1.0",
-    "rollup-plugin-babel": "^4.3.0",
-    "rollup-plugin-commonjs": "^9.1.8",
-    "rollup-plugin-flow": "^1.1.1",
-    "rollup-plugin-json": "^3.1.0",
-    "rollup-plugin-node-builtins": "^2.1.1",
-    "rollup-plugin-node-resolve": "^4.0.0",
     "slash": "^2.0.0",
     "string-length": "^2.0.0",
     "strip-ansi": "^5.0.0",
     "typescript": "^3.0.3",
-    "watchify": "^3.9.0"
+    "webpack": "^4.28.4"
   },
   "scripts": {
     "build-clean": "rm -rf ./packages/*/build ./packages/*/build-es5",

scripts/browserBuild.js

@@ -7,13 +7,9 @@
 'use strict';
 
 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 rollupJson = require('rollup-plugin-json');
-const rollupBabel = require('rollup-plugin-babel');
-const rollupFlow = require('rollup-plugin-flow');
+const webpack = require('webpack');
+const camelCase = require('camelcase');
+const rimraf = require('rimraf');
 
 const babelEs5Options = {
   // Dont load other config files
@@ -24,43 +20,64 @@ const babelEs5Options = {
     [
       '@babel/preset-env',
       {
-        // Required for Rollup
-        modules: false,
+        // Required for Webpack
+        modules: 'cjs',
         shippedProposals: true,
         // Target ES5
         targets: 'IE 11',
       },
     ],
     '@babel/preset-flow',
   ],
-  runtimeHelpers: true,
 };
 
 function browserBuild(pkgName, entryPath, destination) {
-  return rollup({
-    input: entryPath,
-    plugins: [
+  rimraf.sync(destination);
+
+  return new Promise((resolve, reject) => {
+    webpack(
+      /* eslint-disable sort-keys */
       {
-        resolveId(id) {
-          return id === 'chalk'
-            ? path.resolve(__dirname, '../packages/expect/build/fakeChalk.js')
-            : undefined;
+        mode: 'development',
+        devtool: 'source-map',
+        entry: entryPath,
+        output: {
+          path: path.dirname(destination),
+          library: camelCase(pkgName),
+          libraryTarget: 'umd',
+          filename: path.basename(destination),
+        },
+        module: {
+          rules: [
+            {
+              test: /\.[jt]sx?$/,
+              loader: 'babel-loader',
+              options: babelEs5Options,
+            },
+          ],
+        },
+        resolve: {
+          alias: {
+            chalk: path.resolve(
+              __dirname,
+              '../packages/expect/build/fakeChalk.js'
+            ),
+          },
+        },
+        node: {
+          fs: 'empty',
         },
       },
-      rollupFlow(),
-      rollupJson(),
-      rollupCommonjs(),
-      rollupBabel(babelEs5Options),
-      rollupBuiltins(),
-      rollupResolve(),
-    ],
-  }).then(bundle =>
-    bundle.write({
-      file: destination,
-      format: 'umd',
-      name: pkgName,
-    })
-  );
+      /* eslint-enable */
+      (err, stats) => {
+        if (err || stats.hasErrors()) {
+          reject(err || stats.toString());
+          return;
+        }
+        resolve(stats);
+      }
+    );
+  });
 }
 
 module.exports = browserBuild;