ES6工具链
原文：汇智网
要让Angular2应用跑起来不是件轻松的事，因为它用了太多还不被当前主流浏览器支持 的技术。所以，我们需要一个工具链：
Angular2是面向未来的科技，要求浏览器支持ES6+，我们现在要尝试的话，需要加一些 垫片来抹平当前浏览器与ES6的差异：
- systemjs - 通用模块加载器，支持AMD、CommonJS、ES6等各种格式的JS模块加载
- es6-module-loader - ES6模块加载器，systemjs会自动加载这个模块
- traceur - ES6转码器，将ES6代码转换为当前浏览器支持的ES5代码。systemjs会自动加载 这个模块。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hello,angular2</title>
<!--模块加载器-->
<script type="text/javascript" src="lib/[email protected]"></script>
<!--Angular2模块库-->
<script type="text/javascript" src="lib/angular2.dev.js"></script>
<script>
//设置模块加载规则
System.baseURL = document.baseURI;
System.config({
map:{traceur:"lib/traceur"},
traceurOptions: {annotations: true}
});
</script>
</head>
<body>
<img src="img/jay.gif">
<pre class="logger"></pre>
<!--定义一个ES6脚本元素-->
<script type="module">
//用ES6语法定义一个类
export class Logger{
constructor(){
this.el = document.querySelector("pre.logger");
this.lines = [];
}
log(str){
this.lines.push(str);
this.el.textContent = this.lines.join("\n");
}
}
//实例化，测试一下
var _ = new Logger();
_.log("哎呦，不错哦！");
_.log("真的是用ES6写的噢！");
</script>
</body>
</html>
时间： 2024-08-09 16:52:51