[英]Writing ES6 with traceur compiler
I'm playing around with some ES6 modules today, no real objective, just wanted to try it out. 我今天正在玩一些ES6模块,没有真正的目标,只是想尝试一下。 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 首先,我使用的是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>
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. 我首先尝试从我的requirejs
main.js
文件加载traceur-runtime.js
,但这给了我关于“路径”模块未加载的错误。 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. 我正在使用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/'
}]
}
}
and here are my modules, in es6 & es5 这是我在es6和es5中的模块
ES6 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 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 {};
});
So as you can see, I just want to console.log something to see any kind of feedback but nothing ever comes up. 因此,正如您所看到的,我只想console.log一些东西以查看任何形式的反馈,但是什么也没有发生。 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. 基本上,我想编写类似
User.js
模块并将其导入App.js中以与之配合使用。
Any info anybody can provide me is greatly appreciated! 任何人都可以提供我的任何信息,我们将不胜感激!
我认为您必须对该模块进行require调用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.