diff --git a/package.json b/package.json index 73a32f18d..43e5e7349 100644 --- a/package.json +++ b/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", diff --git a/tools/build.js b/tools/build.js index 7b87e1710..a7876f7ae 100644 --- a/tools/build.js +++ b/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; }); diff --git a/tools/buildHtml.js b/tools/buildHtml.js index 44a2af7f1..8745e6bd8 100644 --- a/tools/buildHtml.js +++ b/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(''); - if (useTrackJs && trackJsToken) { - var trackJsCode = ""; - $('head').prepend(trackJsCode); //add TrackJS tracking code to the top of - } 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 = ``; + + $('head').prepend(trackJsCode); // add TrackJS tracking code to the top of + } 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); }); + diff --git a/tools/distServer.js b/tools/distServer.js index 551901f6d..f5c485b3f 100644 --- a/tools/distServer.js +++ b/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({ diff --git a/tools/srcServer.js b/tools/srcServer.js index c23b0d0e6..7115714b5 100644 --- a/tools/srcServer.js +++ b/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({ diff --git a/webpack.config.js b/webpack.config.js index af02e03ff..d5cae498c 100644 --- a/webpack.config.js +++ b/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;