Upgraded the build tools to ES6. #36

package.json

@@ -5,14 +5,14 @@
   "scripts": {
     "prestart": "npm run remove-dist",
     "start": "parallelshell \"npm run lint:tools\" \"npm run test:watch\" \"npm run open:src\"",
-    "open:src": "node tools/srcServer.js",
-    "open:dist": "node tools/distServer.js",
+    "open:src": "babel-node tools/srcServer.js",
+    "open:dist": "babel-node tools/distServer.js",
     "lint:tools": "eslint webpack.config.js tools",
     "clean-dist": "npm run remove-dist && mkdir dist",
     "remove-dist": "node_modules/.bin/rimraf ./dist",
-    "build:html": "node tools/buildHtml.js",
+    "build:html": "babel-node tools/buildHtml.js",
     "prebuild": "npm run clean-dist && npm run build:html",
-    "build": "npm run test && node tools/build.js && npm run open:dist",
+    "build": "npm run test && babel-node tools/build.js && npm run open:dist",
     "test": "cross-env NODE_ENV=test mocha --reporter progress --compilers js:babel/register --recursive \"./src/**/*.spec.js\"",
     "test:watch": "npm run test -- --watch"
   },
@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "babel": "5.8.23",
-    "babel-eslint": "4.1.6",
+    "babel-eslint": "4.1.7",
     "babel-loader": "5.1.4",
     "babel-plugin-react-display-name": "2.0.0",
     "babel-plugin-react-transform": "1.1.1",

tools/build.js

@@ -1,37 +1,45 @@
 // More info on Webpack's Node API here: https://webpack.github.io/docs/node.js-api.html
 // Allowing console calls below since this is a build file.
 /*eslint-disable no-console */
-var webpack = require('webpack');
-var webpackConfigBuilder = require('../webpack.config');
-var colors = require('colors');
-var args = require('yargs').argv;
+import webpack from 'webpack';
+import webpackConfigBuilder from '../webpack.config';
+import colors from 'colors';
+import { argv as args } from 'yargs';
 
-process.env.NODE_ENV='production'; //this assures React is built in prod mode and that the Babel dev config doesn't apply.
+process.env.NODE_ENV = 'production'; // this assures React is built in prod mode and that the Babel dev config doesn't apply.
 
-var webpackConfig = webpackConfigBuilder('production');
+const webpackConfig = webpackConfigBuilder(process.env.NODE_ENV);
 
-webpack(webpackConfig).run(function(err, stats) {
-  var inSilentMode = args.s; //set to true when -s is passed on the command
+webpack(webpackConfig).run((err, stats) => {
+  const inSilentMode = args.s; // set to true when -s is passed on the command
 
-  if (!inSilentMode) console.log('Generating minified bundle for production use via Webpack...'.bold.blue);
+  if (!inSilentMode) {
+    console.log('Generating minified bundle for production use via Webpack...'.bold.blue);
+  }
 
-  if (err) { //so a fatal error occurred. Stop here.
+  if (err) { // so a fatal error occurred. Stop here.
     console.log(err.bold.red);
+
     return 1;
   }
 
-  var jsonStats = stats.toJson();
+  const jsonStats = stats.toJson();
 
-  if (jsonStats.hasErrors) return jsonStats.errors.map(error => console.log(error.red));
+  if (jsonStats.hasErrors) {
+    return jsonStats.errors.map(error => console.log(error.red));
+  }
 
   if (jsonStats.hasWarnings && !inSilentMode) {
     console.log('Webpack generated the following warnings: '.bold.yellow);
     jsonStats.warnings.map(warning => console.log(warning.yellow));
   }
 
-  if (!inSilentMode) console.log('Webpack stats: ' + stats.toString());
+  if (!inSilentMode) {
+    console.log(`Webpack stats: ${stats}`);
+  }
 
-  //if we got this far, the build succeeded.
+  // if we got this far, the build succeeded.
   console.log('Your app has been compiled in production mode and written to /dist. It\'s ready to roll!'.green.bold);
+
   return 0;
 });

tools/buildHtml.js

@@ -7,30 +7,39 @@
 // Allowing console calls below since this is a build file.
 /*eslint-disable no-console */
 
-var fs = require('fs');
-var colors = require('colors');
-var cheerio = require('cheerio');
-var useTrackJs = true; //If you choose not to use TrackJS, just set this to false and the build warning will go away.
-var trackJsToken = ''; //If you choose to use TrackJS, insert your unique token here. To get a token, go to https://trackjs.com
+import fs from 'fs';
+import colors from 'colors';
+import cheerio from 'cheerio';
 
-fs.readFile('src/index.html', 'utf8', function (err,data) {
-  if (err) return console.log(err);
+const useTrackJs = true; // If you choose not to use TrackJS, just set this to false and the build warning will go away.
+const trackJsToken = ''; // If you choose to use TrackJS, insert your unique token here. To get a token, go to https://trackjs.com
 
-  var $ = cheerio.load(data);
+fs.readFile('src/index.html', 'utf8', (err, markup) => {
+  if (err) {
+    return console.log(err);
+  }
+
+  const $ = cheerio.load(markup);
 
-  //since a separate spreadsheet is only utilized for the production build, need to dynamically add this here.
+  // since a separate spreadsheet is only utilized for the production build, need to dynamically add this here.
   $('head').prepend('<link rel="stylesheet" href="styles.css">');
 
-  if (useTrackJs && trackJsToken) {
-    var trackJsCode = "<!-- BEGIN TRACKJS Note: This should be the first <script> on the page per https://my.trackjs.com/install --><script>window._trackJs = { token: '" + trackJsToken + "' };</script><script src=https://d2zah9y47r7bi2.cloudfront.net/releases/current/tracker.js></script><!-- END TRACKJS -->";
-    $('head').prepend(trackJsCode); //add TrackJS tracking code to the top of <head>
-  } else {
-    if (useTrackJs) console.log('To track JavaScript errors, sign up for a free trial at TrackJS.com and enter your token in /tools/build.html.'.yellow);
+  if (useTrackJs) {
+    if (trackJsToken) {
+      const trackJsCode = `<!-- BEGIN TRACKJS Note: This should be the first <script> on the page per https://my.trackjs.com/install --><script>window._trackJs = { token: '${trackJsToken}' };</script><script src=https://d2zah9y47r7bi2.cloudfront.net/releases/current/tracker.js></script><!-- END TRACKJS -->`;
+
+      $('head').prepend(trackJsCode); // add TrackJS tracking code to the top of <head>
+    } else {
+      console.log('To track JavaScript errors, sign up for a free trial at TrackJS.com and enter your token in /tools/build.html on line 10.'.yellow);
+    }
   }
 
   fs.writeFile('dist/index.html', $.html(), 'utf8', function (err) {
-    if (err) return console.log(err);
+    if (err) {
+      return console.log(err);
+    }
   });
 
   console.log('index.html written to /dist'.green);
 });
+

tools/distServer.js

@@ -1,7 +1,7 @@
 // This file configures a web server for testing the production build
 // on your local machine.
 
-var browserSync = require('browser-sync');
+import browserSync from 'browser-sync';
 
 // Run Browsersync
 browserSync({

tools/srcServer.js

@@ -2,14 +2,14 @@
 // which supports hot reloading and synchronized testing.
 
 // Require Browsersync along with webpack and middleware for it
-var browserSync = require('browser-sync');
-var webpack = require('webpack');
-var webpackDevMiddleware = require('webpack-dev-middleware');
-var webpackHotMiddleware = require('webpack-hot-middleware');
-var webpackConfigBuilder = require('../webpack.config');
-var webpackConfig = webpackConfigBuilder('development');
-
-var bundler = webpack(webpackConfig);
+import browserSync from 'browser-sync';
+import webpack from 'webpack';
+import webpackDevMiddleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+import webpackConfigBuilder from '../webpack.config';
+
+const webpackConfig = webpackConfigBuilder('development');
+const bundler = webpack(webpackConfig);
 
 // Run Browsersync and use middleware for Hot Module Replacement
 browserSync({

webpack.config.js

@@ -1,28 +1,33 @@
 // For info about this file refer to webpack and webpack-hot-middleware documentation
 // Rather than having hard coded webpack.config.js for each environment, this
 // file generates a webpack config for the environment passed to the getConfig method.
-var webpack = require('webpack');
-var path = require('path');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
+import webpack from 'webpack';
+import path from 'path';
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
 
-var getPlugins = function(env) {
-  var GLOBALS = {
+const developmentEnvironment = 'development' ;
+const productionEnvironment = 'production';
+const testEnvironment = 'test';
+
+const getPlugins = function (env) {
+  const GLOBALS = {
     'process.env.NODE_ENV': JSON.stringify(env),
-    __DEV__: env == 'development'
+    __DEV__: env === developmentEnvironment
   };
 
-  var plugins = [
+  const plugins = [
     new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.DefinePlugin(GLOBALS) //Tells React to build in prod mode. https://facebook.github.io/react/downloads.html
   ];
 
-  switch(env) {
-    case 'production':
+  switch (env) {
+    case productionEnvironment:
       plugins.push(new ExtractTextPlugin('styles.css'));
       plugins.push(new webpack.optimize.DedupePlugin());
       plugins.push(new webpack.optimize.UglifyJsPlugin());
       break;
-    case 'development':
+
+    case developmentEnvironment:
       plugins.push(new webpack.HotModuleReplacementPlugin());
       plugins.push(new webpack.NoErrorsPlugin());
       break;
@@ -31,22 +36,23 @@ var getPlugins = function(env) {
   return plugins;
 };
 
-var getEntry = function(env) {
-  var entry = [];
+const getEntry = function (env) {
+  const entry = [];
 
-  if (env == 'development') { //only want hot reloading when in dev.
+  if (env === developmentEnvironment ) { // only want hot reloading when in dev.
     entry.push('webpack-hot-middleware/client');
   }
 
   entry.push('./src/index');
+
   return entry;
 };
 
-var getLoaders = function (env) {
-  var loaders = [{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel', 'eslint']}];
+const getLoaders = function (env) {
+  const loaders = [{ test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel', 'eslint'] }];
 
-  if (env == 'production') {
-    //generate separate physical stylesheet for production build using ExtractTextPlugin. This provides separate caching and avoids a flash of unstyled content on load.
+  if (env === productionEnvironment ) {
+    // generate separate physical stylesheet for production build using ExtractTextPlugin. This provides separate caching and avoids a flash of unstyled content on load.
     loaders.push({
       test: /(\.css|\.scss)$/,
       include: path.join(__dirname, 'src'),
@@ -63,15 +69,15 @@ var getLoaders = function (env) {
   return loaders;
 };
 
-module.exports = function getConfig(env) {
+function getConfig(env) {
   return {
     debug: true,
-    devtool: env == 'production' ? 'source-map' : 'cheap-module-eval-source-map', //more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
-    noInfo: true, //set to false to see a list of every file being bundled.
+    devtool: env === productionEnvironment  ? 'source-map' : 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
+    noInfo: true, // set to false to see a list of every file being bundled.
     entry: getEntry(env),
-    target: env == 'test' ? 'node' : 'web', //necessary per https://webpack.github.io/docs/testing.html#compile-and-test
+    target: env === testEnvironment ? 'node' : 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
     output: {
-      path: __dirname + '/dist', //Note: Physical files are only output by the production build task `npm run build`.
+      path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
       publicPath: '',
       filename: 'bundle.js'
     },
@@ -80,4 +86,6 @@ module.exports = function getConfig(env) {
       loaders: getLoaders(env)
     }
   };
-};
+}
+
+export default getConfig;