javascript - 使用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，但它给了我关于“path”模块未加载的错误。所以为了让事情顺利进行，我来到了这里。这不会给我带来任何错误，并且所有文件都按正确的顺序加载。

我正在使用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 调用