我今天尝试了一些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>我首先尝试从我需要的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中,以使用它们等等。
任何人可以提供给我的任何信息都是非常感谢的!
发布于 2015-05-18 13:40:27
我认为您必须对该模块进行必要的调用
https://stackoverflow.com/questions/27195747
复制相似问题