feat(config): Add ES6 support

Author: Josh

config/paths.js

@@ -4,7 +4,7 @@ const isGlobal = require('installed-by-yarn-globally')
 const appRoot = process.cwd()
 const ownModules = path.resolve(__dirname, '../node_modules')
 
-const paths = {
+let paths = {
   appRoot,
   entry: path.resolve('./src/index.js'),
   dist: path.resolve('./dist'),

config/webpack.config.dev.js

@@ -7,11 +7,9 @@ const getClientEnvironment = require('./env')
 const paths = require('../config/paths')
 
 module.exports = {
-
   devtool: 'eval',
 
   entry: [
-
     // WebpackDevServer client.
     require.resolve('react-dev-utils/webpackHotDevClient'),
 
@@ -22,7 +20,6 @@ module.exports = {
   ],
 
   output: {
-
     pathinfo: true,
 
     // The build folder.
@@ -35,23 +32,30 @@ module.exports = {
   },
 
   resolveLoader: {
-
     // Look for loaders in own node_modules
     modules: paths.resolveLoaderModules,
-    moduleExtensions: [ '-loader' ]
+    moduleExtensions: ['-loader']
   },
 
   resolve: {
-    modules: [ 'node_modules' ],
-    extensions: [ '.js', '.elm' ]
+    modules: ['node_modules'],
+    extensions: ['.js', '.elm']
   },
 
   module: {
-
     noParse: /\.elm$/,
 
     rules: [
 
+      {
+        test: /\.js$/,
+        exclude: [/elm-stuff/, /node_modules/],
+        loader: 'babel-loader',
+        query: {
+          presets: ['es2015', 'es2016', 'es2017']
+        }
+      },
+
       {
         test: /\.elm$/,
         exclude: [/elm-stuff/, /node_modules/],
@@ -101,14 +105,7 @@ module.exports = {
       },
 
       {
-        exclude: [
-          /\.html$/,
-          /\.js$/,
-          /\.elm$/,
-          /\.css$/,
-          /\.json$/,
-          /\.svg$/
-        ],
+        exclude: [/\.html$/, /\.js$/, /\.elm$/, /\.css$/, /\.json$/, /\.svg$/],
         loader: 'url-loader',
         options: {
           limit: 10000,
@@ -128,7 +125,6 @@ module.exports = {
   },
 
   plugins: [
-
     new DefinePlugin(getClientEnvironment()),
 
     new HtmlWebpackPlugin({

config/webpack.config.prod.js

@@ -9,15 +9,11 @@ const getClientEnvironment = require('./env')
 const paths = require('../config/paths')
 
 module.exports = {
-
   bail: true,
 
-  entry: [
-    paths.entry
-  ],
+  entry: [paths.entry],
 
   output: {
-
     // The build folder.
     path: paths.dist,
 
@@ -29,25 +25,33 @@ module.exports = {
   },
 
   resolveLoader: {
-
     // Look for loaders in own ./node_modules
     modules: paths.resolveLoaderModules,
-    moduleExtensions: [ '-loader' ]
+    moduleExtensions: ['-loader']
   },
 
   resolve: {
-    modules: [ 'node_modules' ],
-    extensions: [ '.js', '.elm' ]
+    modules: ['node_modules'],
+    extensions: ['.js', '.elm']
   },
 
   module: {
-
     noParse: /\.elm$/,
 
     rules: [
+
+      {
+        test: /\.js$/,
+        exclude: [/elm-stuff/, /node_modules/],
+        loader: 'babel-loader',
+        query: {
+          presets: ['es2015', 'es2016', 'es2017']
+        }
+      },
+
       {
         test: /\.elm$/,
-        exclude: [ /elm-stuff/, /node_modules/ ],
+        exclude: [/elm-stuff/, /node_modules/],
 
         // Use the local installation of elm-make
         loader: 'elm-webpack-loader',
@@ -88,14 +92,7 @@ module.exports = {
       },
 
       {
-        exclude: [
-          /\.html$/,
-          /\.js$/,
-          /\.elm$/,
-          /\.css$/,
-          /\.json$/,
-          /\.svg$/
-        ],
+        exclude: [/\.html$/, /\.js$/, /\.elm$/, /\.css$/, /\.json$/, /\.svg$/],
         loader: 'url-loader',
         options: {
           limit: 10000,
@@ -114,13 +111,12 @@ module.exports = {
   },
 
   plugins: [
-
-    new AssetsPlugin({ path: paths.dist }),
+    new AssetsPlugin({path: paths.dist}),
 
     new DefinePlugin(getClientEnvironment()),
 
     // Remove the content of the ./dist/ folder.
-    new CleanWebpackPlugin([ 'dist' ], {
+    new CleanWebpackPlugin(['dist'], {
       root: paths.appRoot,
       verbose: false,
       dry: false

package.json

@@ -42,6 +42,12 @@
   "dependencies": {
     "assets-webpack-plugin": "^3.5.1",
     "autoprefixer": "^6.7.7",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-es2016": "^6.24.1",
+    "babel-preset-es2017": "^6.24.1",
     "chalk": "1.1.3",
     "clean-webpack-plugin": "^0.1.16",
     "cli-table": "0.3.1",
@@ -74,7 +80,6 @@
     "commitizen": "^2.9.6",
     "cz-conventional-changelog": "^2.0.0",
     "dir-compare": "^1.3.0",
-    "husky": "^0.13.1",
     "mocha": "^3.2.0",
     "rimraf": "^2.5.4",
     "semantic-release": "^6.3.2",

template/src/index.js

@@ -1,7 +1,7 @@
-require('./main.css')
-var logoPath = require('./logo.svg')
-var Elm = require('./App.elm')
+import './main.css'
+const logoPath = require('./logo.svg')
+const Elm = require('./App.elm')
 
-var root = document.getElementById('root')
+const root = document.getElementById('root')
 
 Elm.App.embed(root, logoPath)