Writing ES6 with traceur compiler

Question

I'm playing around with some ES6 modules today, no real objective, just wanted to try it out. My problem though, is that I can't seem to get my code to execute. let me explain:

First off, i am using requireJS, so I have my files included like this

<script src="/assets/bower_components/traceur-runtime/traceur-runtime.js"></script>
<script data-main="/assets/js/main" src="/assets/bower_components/requirejs/require.js"></script>
<script>require(['/assets/js/compiled/User.js']);</script>
<script>require(['/assets/js/compiled/App.js']);</script>

I first tried to load traceur-runtime.js from my requirejs main.js file but it was giving me errors about the 'path' module not being loaded. So for the sake of just getting things working i landed here. This gives me no errors and all files load in the correct order.

I am using grunt-traceur to compile my es6 files, here is that config.

    traceur: {
        options: {
            //experimental: true,
            modules: 'amd'
            //arrayComprehension: true,
            //generatorComprehension: true
        },
        custom: {
            files: [{
                expand: true,
                cwd: './app/assets/js/modules/',
                src: ['*.js'],
                dest: './app/assets/js/compiled/'
            }]
        }
    }

and here are my modules, in es6 & es5

ES6

// User.js
export default function User(age) {
  this.age = age;
};

// App.js
import User from 'user';

var shan = new User(35);

console.log(shan);
document.body.innerHTML = shan.age;

Traceur compiled

// User.js
define("app/assets/js/compiled/User", [], function() {
  "use strict";
  var __moduleName = "app/assets/js/compiled/User";
  function require(path) {
    return $traceurRuntime.require("app/assets/js/compiled/User", path);
  }
  function User(age) {
    this.age = age;
  }
  var $__default = User;
  ;
  return {
    get default() {
      return $__default;
    },
    __esModule: true
  };
});


// App.js
define("app/assets/js/compiled/App", ['user'], function($__0) {
  "use strict";
  var __moduleName = "app/assets/js/compiled/App";
  function require(path) {
    return $traceurRuntime.require("app/assets/js/compiled/App", path);
  }
  if (!$__0 || !$__0.__esModule)
    $__0 = {default: $__0};
  var User = $__0.default;
  var shan = new User(35);
  console.log(shan);
  document.body.innerHTML = shan.age;
  return {};
});

So as you can see, I just want to console.log something to see any kind of feedback but nothing ever comes up. Am I fundamentally doing this wrong? Basically, I want to write modules like User.js and import them into App.js to work with them and such.

Any info anybody can provide me is greatly appreciated!

Answer 1

I think you have to make the require call of that module