feat(frameRunner): Run through webpack

gulpfile.js

@@ -19,7 +19,6 @@ const Rx = require('rx'),
   concat = require('gulp-concat'),
   uglify = require('gulp-uglify'),
   merge = require('merge-stream'),
-  babel = require('gulp-babel'),
   sourcemaps = require('gulp-sourcemaps'),
   gulpif = require('gulp-if'),
 
@@ -29,6 +28,7 @@ const Rx = require('rx'),
   webpackDevMiddleware = require('webpack-dev-middleware'),
   webpackHotMiddleware = require('webpack-hot-middleware'),
   webpackConfig = require('./webpack.config.js'),
+  webpackFrameConfig = require('./webpack.frame-runner.js'),
 
   // server process
   nodemon = require('gulp-nodemon'),
@@ -131,12 +131,6 @@ const paths = {
     resolve('rx', 'index.js', 'dist/rx.all.min.js')
   ],
 
-  js: [
-    'client/main.js',
-    'client/frame-runner.js',
-    'client/plugin.js'
-  ],
-
   less: './client/less/main.less',
   lessFiles: [
     './client/**/*.less',
@@ -298,6 +292,26 @@ gulp.task('pack-client', function() {
     .pipe(gulp.dest(dest));
 });
 
+gulp.task('pack-frame-runner', function() {
+  if (!__DEV__) { console.log('\n\nbundling frame production\n\n'); }
+
+  function condition(file) {
+    const filepath = file.relative;
+    return __DEV__ || (/json$/).test('' + filepath);
+  }
+
+  const dest = webpackFrameConfig.output.path;
+
+  return gulp.src(webpackFrameConfig.entry)
+    .pipe(plumber({ errorHandler }))
+    .pipe(webpackStream({
+      ...webpackFrameConfig,
+      ...webpackOptions
+    }))
+    .pipe(gulpif(condition, gutil.noop(), uglify()))
+    .pipe(gulp.dest(dest));
+});
+
 const webpackManifestFiles = [ 'react-manifest.json', 'chunk-manifest.json' ];
 gulp.task('move-webpack-manifest', ['pack-client'], function() {
   const files = webpackManifestFiles.map(function(filename) {
@@ -385,12 +399,7 @@ gulp.task('js', function() {
         __DEV__ ?
           sourcemaps.write({ sourceRoot: '/vendor' }) :
           gutil.noop()
-      ),
+      )
-
-    gulp.src(paths.js)
-      .pipe(plumber({ errorHandler }))
-      .pipe(babel())
-      .pipe(__DEV__ ? gutil.noop() : uglify())
   );
 
   return jsFiles
@@ -434,6 +443,7 @@ gulp.task('build', [
   'less',
   'js',
   'pack-client',
+  'pack-frame-runner',
   'move-webpack-manifest',
   'clean-webpack-manifest',
   'build-manifest'
@@ -443,20 +453,22 @@ const watchDependents = [
   'less',
   'js',
   'serve',
+  'pack-frame-runner',
   'dev-server'
 ];
 
 gulp.task('watch', watchDependents, function() {
   gulp.watch(paths.lessFiles, ['less']);
-  gulp.watch(paths.js.concat(paths.vendorChallenges), ['js']);
+  gulp.watch(paths.vendorChallenges, ['js']);
-  gulp.watch(paths.js, ['js']);
+  gulp.watch(webpackFrameConfig.entry, ['pack-frame-runner']);
 });
 
 gulp.task('default', [
   'less',
   'serve',
   'watch',
-  'dev-server'
+  'dev-server',
+  'pack-frame-runner'
 ]);
 
 gulp.task('test', function() {

package.json

@@ -145,6 +145,7 @@
     "babel-plugin-transform-imports": "^1.4.1",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-stage-0": "^6.3.13",
+    "babel-preset-stage-3": "^6.24.1",
     "browser-sync": "^2.9.12",
     "chunk-manifest-webpack-plugin": "^1.1.2",
     "commitizen": "^2.9.6",

webpack.frame-runner.js

@@ -4,9 +4,7 @@ const path = require('path');
 const __DEV__ = process.env.NODE_ENV !== 'production';
 
 module.exports = {
-  entry: {
+  entry: './client/frame-runner.js',
-    'frame-runner': './client/frame-runner.js'
-  },
   devtool: __DEV__ ? 'inline-source-map' : null,
   node: {
     // Mock Node.js modules that Babel require()s but that we don't
@@ -16,19 +14,35 @@ module.exports = {
     net: 'empty'
   },
   output: {
-    filename: '[name].js',
+    filename: __DEV__ ? 'frame-runner.js' : 'frame-runner-[hash].js',
-    chunkFilename: '[name]-[name].js',
     path: path.join(__dirname, '/public/js'),
     publicPath: '/js'
   },
+  stats: {
+    // Examine all modules
+    maxModules: Infinity,
+    // Display bailout reasons
+    optimizationBailout: true
+  },
   module: {
-    loaders: [
+    rules: [{
-      {
+      test: /\.jsx?$/,
-        test: /\.jsx?$/,
+      include: [ path.join(__dirname, 'client/') ],
-        include: [ path.join(__dirname, 'client/') ],
+      use: {
-        loaders: [ 'babel' ]
+        loader: 'babel-loader',
+        options: {
+          babelrc: false,
+          presets: [
+            [ 'es2015', { modules: false }],
+            [ 'stage-3' ]
+          ],
+          plugins: [
+            'transform-runtime',
+            'lodash'
+          ]
+        }
       }
-    ]
+    }]
   },
   externals: {
     rx: 'Rx'
@@ -45,14 +59,13 @@ module.exports = {
       /debug\/node/,
       'debug/src/browser'
     ),
-    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.ModuleConcatenationPlugin()
-    new webpack.optimize.OccurenceOrderPlugin(true)
   ]
 };
 
 if (__DEV__) {
   module.exports.plugins.push(
     // prevents build on error
-    new webpack.NoErrorsPlugin()
+    new webpack.NoEmitOnErrorsPlugin()
   );
 }