用Traceur編譯器編寫ES6

Question

我今天正在玩一些ES6模塊，沒有真正的目標，只是想嘗試一下。 我的問題是，我似乎無法執行我的代碼。 讓我解釋：

首先，我使用的是requireJS，因此我的文件包含如下內容

<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>

我首先嘗試從我的requirejs main.js文件加載traceur-runtime.js ，但這給了我關於“路徑”模塊未加載的錯誤。 因此，為了使事情順利進行，我來到了這里。 這不會給我任何錯誤，並且所有文件均以正確的順序加載。

我正在使用grunt-traceur來編譯我的es6文件，這是該配置。

    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/'
            }]
        }
    }

這是我在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編譯

// 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 {};
});

因此，正如您所看到的，我只想console.log一些東西以查看任何形式的反饋，但是什么也沒有發生。 我從根本上做錯了嗎？ 基本上，我想編寫類似User.js模塊並將其導入App.js中以與之配合使用。

任何人都可以提供我的任何信息，我們將不勝感激！

Answer 1

我認為您必須對該模塊進行require調用