Add es6 loader to webpack (codecombat#4828)

* add es6 loader

* CLAs component to es6

* Sort /admin/clas by descending date

Author: AndrewJakubowicz

.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": [
+        "env"
+    ],
+    "plugins": [
+        "syntax-dynamic-import"
+    ]
+}

app/assets/javascripts/run-tests.js

@@ -1,16 +1,16 @@
 // Helper for running tests through Karma.
 // Hooks into the test view logic for running tests.
-require('app/app.js')
+require('app/app.js');
 
 window.userObject = {_id:'1'};
 window.serverConfig  = {picoCTF: false, production: false, buildInfo: { sha: 'dev' }};
 window.StripeCheckout = {configure: function (){}};
 window.features = { freeOnly: false, chinaInfra: DEF_CHINA_INFRA }
 window.serverSession = {};
-initialize = require('core/initialize');
+const initialize = require('core/initialize');
 initialize.init();
 application.testing = true;
 application.karmaTest = true;
 console.debug = function() {}; // Karma conf doesn't seem to work? Debug messages are still emitted when they shouldn't be.
-TestView = require('views/TestView');
+const TestView = require('views/TestView');
 TestView.runTests();

app/views/admin/CLAsComponent.vue

@@ -16,23 +16,22 @@ div#admin-clas-view.container
         td {{dateFormat(cla.created)}}
 </template>
 
-<script lang="coffee">
-co = require('co')
-api = require 'core/api'
+<script>
+import api from 'core/api';
 
-module.exports = Vue.extend({
-  data: ->
+export default Vue.extend({
+  data: () => ({
     clas: []
-
-  methods:
-    dateFormat: (s) -> moment(s).format('llll')
-
-  created: co.wrap ->
-    clas = yield api.clas.getAll()
-    clas = _.sortBy(clas, (cla) -> (cla.githubUsername || 'zzzzzz').toLowerCase())
-    clas = _.uniq(clas, true, 'githubUsername')
-    @clas = clas
-})
+  }),
+  methods: {
+    dateFormat: s => moment(s).format('llll')
+  },
+  created() {
+    api.clas.getAll()
+      .then(clas => _.uniq(_.sortBy(clas, (cla) => new Date(cla.created)).reverse(), true, 'githubUsername'))
+      .then(clas => this.clas = clas)
+  }
+});
 
 </script>
 

package.json

@@ -147,6 +147,11 @@
     "yamljs": "^0.2.8"
   },
   "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-preset-env": "^1.7.0",
     "bower": "~1.6.4",
     "bundle-loader": "^0.5.5",
     "commonjs-require-definition": "0.2.0",

webpack.base.config.js

@@ -51,6 +51,12 @@ module.exports = (env) => {
       rules: [
         { test: /\.vue$/, use: [{ loader: 'vue-loader' }] },
         { test: /vendor\/scripts\/async.js/, use: [ { loader: 'imports-loader?root=>window' } ] },
+        { test: /\.js$/,
+          exclude: /(node_modules|bower_components|vendor)/,
+          use: [{
+            loader: 'babel-loader',
+          }]
+        },
         { test: /\.coffee$/, use: [
           { loader: 'coffee-loader' },
         ] },