💣 ES6!? That was easy! 👏

js/app.js

@@ -1,12 +1,12 @@
-'use strict';
+import 'todomvc-common/base.css';
-require('todomvc-common/base.css');
+import 'todomvc-app-css/index.css';
-require('todomvc-app-css/index.css');
+
-var View = require('./view');
+import View from './view';
-var helpers = require('./helpers');
+import helpers from './helpers';
-var Controller = require('./controller');
+import Controller from './controller';
-var Model = require('./model');
+import Model from './model';
-var Store = require('./store');
+import Store from './store';
-var Template = require('./template');
+import Template from './template';
 
 var $on = helpers.$on;
 /**

js/controller.js

@@ -1,5 +1,4 @@
-'use strict';
+export default Controller;
-module.exports = Controller;
 /**
  * Takes a model and view and acts as the controller between them
  *

js/helpers.js

@@ -1,12 +1,5 @@
 /*global NodeList */
-'use strict';
+export default {qs, qsa, $on, $delegate, $parent};
-module.exports = {
-	qs: qs,
-	qsa: qsa,
-	$on: $on,
-	$delegate: $delegate,
-	$parent: $parent
-};
 
 // Get element(s) by CSS selector:
 function qs(selector, scope) {

js/model.js

@@ -1,5 +1,5 @@
-'use strict';
+export default Model;
-module.exports = Model;
+
 /**
  * Creates a new Model instance and hooks up the storage.
  *

js/store.js

@@ -1,6 +1,5 @@
 /*jshint eqeqeq:false */
-'use strict';
+export default Store;
-module.exports = Store;
 /**
  * Creates a new client side storage object and will create an empty
  * collection if no collection already exists.

js/template.js

@@ -1,7 +1,5 @@
 /*jshint laxbreak:true */
-'use strict';
+export default Template;
-
-module.exports = Template;
 
 var htmlEscapes = {
 	'&': '&',

js/view.js

@@ -1,12 +1,6 @@
-'use strict';
+import {qs, qsa, $on, $parent, $delegate} from './helpers';
-var helpers = require('./helpers');
-var qs = helpers.qs;
-var qsa = helpers.qsa;
-var $on = helpers.$on;
-var $parent = helpers.$parent;
-var $delegate = helpers.$delegate;
 
-module.exports = View;
+export default View;
 /**
  * View that abstracts away the browser's DOM completely.
  * It has two simple entry points:

karma.conf.js

@@ -58,7 +58,7 @@ module.exports = function (config) {
 
 		// start these browsers
 		// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-		browsers: ['Chrome'],
+		browsers: ['Firefox'],
 
 
 		// Continuous Integration mode
@@ -68,6 +68,7 @@ module.exports = function (config) {
 		plugins: [
 			require('karma-webpack'),
 			'karma-jasmine',
+			'karma-firefox-launcher',
 			'karma-chrome-launcher'
 		]
 	});

package.json

@@ -12,6 +12,7 @@
     "jasmine-core": "2.3.4",
     "karma": "0.13.8",
     "karma-chrome-launcher": "0.2.0",
+    "karma-firefox-launcher": "0.1.6",
     "karma-jasmine": "0.3.6",
     "karma-webpack": "1.7.0",
     "style-loader": "0.12.3",

test/ControllerSpec.js

@@ -1,9 +1,7 @@
 /*global app, jasmine, describe, it, beforeEach, expect */
-var Controller = require('../js/controller');
+import Controller from '../js/controller';
 
 describe('controller', function () {
-	'use strict';
-
 	var subject, model, view;
 
 	var setUpModel = function (todos) {

webpack.config.js

@@ -9,6 +9,7 @@ var config = {
 	context: here('js'),
 	module: {
 		loaders: [
+			{test: /\.js$/, loader: 'babel', exclude: /node_modules/},
 			{test: /\.css$/, loader: 'style!css'}
 		]
 	}