compile es6/es2015 with babel

5 files changed, 36 insertions, 5 deletions

diff --git a/app/assets/javascripts/webpack/bundle.js b/app/assets/javascripts/webpack/bundle.js
index 6c841b25771..b8e38151e5f 100644
--- a/app/assets/javascripts/webpack/bundle.js
+++ b/app/assets/javascripts/webpack/bundle.js
@@ -1 +1,4 @@
-require('./hello_world');
+var HelloWorld = require('./hello_world').default;
+
+var message = new HelloWorld('webpack');
+message.sayHello();
diff --git a/app/assets/javascripts/webpack/hello_world.js b/app/assets/javascripts/webpack/hello_world.js
deleted file mode 100644
index 5be69b187fd..00000000000
--- a/app/assets/javascripts/webpack/hello_world.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/* eslint-disable no-console */
-
-console.log('hello world!');
diff --git a/app/assets/javascripts/webpack/hello_world.js.es6 b/app/assets/javascripts/webpack/hello_world.js.es6
new file mode 100644
index 00000000000..b3d7c9dd4d4
--- /dev/null
+++ b/app/assets/javascripts/webpack/hello_world.js.es6
@@ -0,0 +1,11 @@
+/* eslint-disable no-undef, no-alert */
+
+export default class HelloWorld {
+  constructor(name) {
+    this.message = `Hello ${name}!`;
+  }
+
+  sayHello() {
+    alert(this.message);
+  }
+}
diff --git a/config/webpack.config.js b/config/webpack.config.js
index ea51c9d1af7..b4892a11ad0 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -22,6 +22,19 @@ var config = {
     filename: IS_PRODUCTION ? '[name]-[chunkhash].js' : '[name].js'
   },
 
+  module: {
+    loaders: [
+      {
+        test: /\.es6$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        query: {
+          presets: ['es2015']
+        }
+      }
+    ]
+  },
+
   plugins: [
     // manifest filename must match config.webpack.manifest_filename
     // webpack-rails only needs assetsByChunkName to function properly
@@ -32,7 +45,11 @@ var config = {
       modules: false,
       assets: true
     })
-  ]
+  ],
+
+  resolve: {
+    extensions: ['', '.js', '.es6', '.js.es6']
+  }
 }
 
 if (!IS_PRODUCTION) {
diff --git a/package.json b/package.json
index de199c269db..526a3c34e01 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,9 @@
     "eslint-report": "npm run eslint -- --format html --output-file ./eslint-report.html"
   },
   "dependencies": {
+    "babel-core": "^6.17.0",
+    "babel-loader": "^6.2.5",
+    "babel-preset-es2015": "^6.16.0",
     "stats-webpack-plugin": "^0.4.2",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.16.2"