Switch from browserify to webpack in order to be able to use most recent ES modules & allow JavaScript syntax beyond ES5

.circleci/config.yml

@@ -409,9 +409,6 @@ jobs:
       - run:
           name: Display function constructors in plotly.js bundle
           command: npm run log-new-func
-      - run:
-          name: Test certain bundles against function constructors
-          command: npm run no-new-func
       - run:
           name: Test plotly bundles against es6
           command: npm run no-es6-dist

devtools/test_dashboard/devtools.js

@@ -5,7 +5,7 @@
 var Fuse = require('fuse.js/dist/fuse.common.js');
 var mocks = require('../../build/test_dashboard_mocks.json');
 var credentials = require('../../build/credentials.json');
-var Lib = require('@src/lib');
+var Lib = require('../../src/lib');
 
 require('./perf');
 
@@ -268,3 +268,5 @@ function handleOnLoad() {
     Tabs.setPlotConfig();
     plotFromHash();
 }
+
+module.exports = Tabs;

devtools/test_dashboard/server.js

@@ -3,19 +3,23 @@ var path = require('path');
 var http = require('http');
 var ecstatic = require('ecstatic');
 var open = require('open');
-var browserify = require('browserify');
+var webpack = require('webpack');
 var minimist = require('minimist');
 
 var constants = require('../../tasks/util/constants');
-var makeWatchifiedBundle = require('../../tasks/util/watchified_bundle');
-var shortcutPaths = require('../../tasks/util/shortcut_paths');
+var config = require('../../webpack.config.js');
+config.optimization = { minimize: false };
+// If interested in development mode
+// config.mode = 'development';
 
 var args = minimist(process.argv.slice(2), {});
 var PORT = args.port || 3000;
 var strict = args.strict;
 var mathjax3 = args.mathjax3;
 var mathjax3chtml = args.mathjax3chtml;
 
+if(strict) config.entry = './lib/index-strict.js';
+
 // Create server
 var server = http.createServer(ecstatic({
     root: constants.pathToRoot,
@@ -24,33 +28,70 @@ var server = http.createServer(ecstatic({
     cors: true
 }));
 
-// Make watchified bundle for plotly.js
-var bundlePlotly = makeWatchifiedBundle(strict, function() {
-    // open up browser window on first bundle callback
-    open('http://localhost:' + PORT + '/devtools/test_dashboard/index' + (
-        strict ? '-strict' :
-        mathjax3 ? '-mathjax3' :
-        mathjax3chtml ? '-mathjax3chtml' : ''
-    ) + '.html');
-});
-
-// Bundle devtools code
-var devtoolsPath = path.join(constants.pathToRoot, 'devtools/test_dashboard');
-var devtools = browserify(path.join(devtoolsPath, 'devtools.js'), {
-    transform: [shortcutPaths]
-});
-
 // Start the server up!
 server.listen(PORT);
 
-// Build and bundle all the things!
+// open up browser window on first bundle callback
+open('http://localhost:' + PORT + '/devtools/test_dashboard/index' + (
+    strict ? '-strict' :
+    mathjax3 ? '-mathjax3' :
+    mathjax3chtml ? '-mathjax3chtml' : ''
+) + '.html');
+
+// mock list
 getMockFiles()
     .then(readFiles)
     .then(createMocksList)
-    .then(saveToFile)
-    .then(bundleDevtools)
-    .then(bundlePlotly);
+    .then(saveToFile);
 
+// Devtools config
+var devtoolsConfig = {};
+
+var devtoolsPath = path.join(constants.pathToRoot, 'devtools/test_dashboard');
+devtoolsConfig.entry = path.join(devtoolsPath, 'devtools.js');
+
+devtoolsConfig.output = {
+    path: config.output.path,
+    filename: 'test_dashboard-bundle.js',
+    library: {
+        name: 'Tabs',
+        type: 'umd',
+        umdNamedDefine: true
+    }
+};
+
+devtoolsConfig.target = config.target;
+devtoolsConfig.plugins = config.plugins;
+devtoolsConfig.optimization = config.optimization;
+devtoolsConfig.mode = config.mode;
+
+var compiler;
+
+compiler = webpack(devtoolsConfig);
+compiler.run(function(devtoolsErr, devtoolsStats) {
+    if(devtoolsErr) {
+        console.log('err:', devtoolsErr);
+    } else if(devtoolsStats.hasErrors()) {
+        console.log('stats.errors:', devtoolsStats.errors);
+    } else {
+        console.log('success:', devtoolsConfig.output.path + '/' + devtoolsConfig.output.filename);
+    }
+
+    compiler.close(function(closeErr) {
+        if(!closeErr) {
+            compiler = webpack(config);
+            compiler.watch({}, function(err, stats) {
+                if(err) {
+                    console.log('err:', err);
+                } else if(stats.hasErrors()) {
+                    console.log('stats.errors:', stats.errors);
+                } else {
+                    console.log('success:', config.output.path + '/' + config.output.filename);
+                }
+            });
+        }
+    });
+});
 
 function getMockFiles() {
     return new Promise(function(resolve, reject) {
@@ -137,16 +178,3 @@ function writeFilePromise(path, contents) {
         });
     });
 }
-
-function bundleDevtools() {
-    return new Promise(function(resolve, reject) {
-        devtools.bundle(function(err) {
-            if(err) {
-                console.error('Error while bundling!', JSON.stringify(String(err)));
-                return reject(err);
-            } else {
-                return resolve();
-            }
-        }).pipe(fs.createWriteStream(constants.pathToTestDashboardBundle));
-    });
-}