[ES6] 01. Intro to ES6 and traceur compiler

时间:2023-02-22 16:26:35

---恢复内容开始---

ES6 is ECMAScript version 6, which JavaScript is based on. The next version of JavaScript is going to be based on version 6 of ECMAScript.

Tracer is a way to compile that next version of JavaScript back into JavaScript of today, meaning that you can write the next version of JavaScript and have it compiled down to JavaScript you can use today, because ES6 isn't supported completely and not standardized completely across all the browsers, in Note and everything.

While ES6 is still being standardized and all the browsers are still working on supporting all the different features, it's worth getting a head start because Angular 2.0 will be based on ECMAScript 6 in the future when it's released. Thanks to Tracer, we can start playing around with ES6 features today as well as some of the things that Angular has started releasing, like DI, that already use ES6.

In the future, we'll also get to the ECMAScript 6+ that AngularJS 2.0 will work with, which adds things like annotations and some sort of typing. It's kind of what like TypeScriptdoes by compiling the static-type JavaScript down to JavaScript.

After you install Tracer using npm install Tracer using the -g global flag or not. Here I did and I just used Tracer to output this file, which is an ES6 file, to this Tracer-compiled file. Again, this is the JavaScript of today, the one that's being output, and this is ES6.

npm install tracer -g

[ES6] 01. Intro to ES6 and traceur compiler

Now, the file that this outputs is the file you'll want to use with the Tracer runtime, so you'll include the Tracer runtime first and then include the output file. Then the browser will be able to use this file just fine. Again, you're not using the ES6 file. You're using the output Tracer-compiled file. Then loading the Tracer runtime and then loading your own compiled file.

[ES6] 01. Intro to ES6 and traceur compiler

If instead of using the browser, you want to invoke that file with node, simply use Tracer, and instead of using it to compile you can use it to run the output file and then run through the Tracer-compiled file using Tracer as the "runtime."

While installing Tracer is as easy as npm install Tracer, if you want to jump right in, you can just open ES6 Fiddle in your browser and load one of the examples. Then hit run and you can begin playing with ES6 right away.

Basically behind the scenes, this is compiling this to a Tracer-compiled file and then running it through Tracer to give you what the output of the console is.

[ES6] 01. Intro to ES6 and traceur compiler的更多相关文章

  1. 石川es6课程---1-2、ES6简介

    石川es6课程---1-2.ES6简介 一.总结 一句话总结: 从ECMAScript的历史发展来看,太顺了的时候总会遇到一挫折,比如ecma4 1.ECMAScript 和 JavaScript关系 ...

  2. React与ES6(四)ES6如何处理React mixins

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  3. React与ES6(三)ES6类和方法绑定

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  4. React和ES6(二)ES6的类和ES7的property initializer

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  5. ES6入门一:ES6简介及Babel转码器

    ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码  1.1一个常见的问题,ECMAScript和JavaScript到底是什 ...

  6. 石川es6课程---18、ES6 复习

    石川es6课程---18.ES6 复习 一.总结 一句话总结: 无论在讲课和学习中,复习总结都是很重要 二.ES6 复习 变量 let const 声明方式 能否重复声明 作用域 类型 是否支持变量提 ...

  7. ES6 第七节 ES6中新增的数组知识(1)

    目录 ES6 第七节 ES6中新增的数组知识(1) 第七节 ES6中新增的数组知识(1) JSON数组格式转换 Array.of()方法: find()实例方法: ES6 第七节 ES6中新增的数组知 ...

  8. [ES6] 02. Traceur compiler and Grunt

    Local Install:  npm install -g traceur npm install grunt-contrib-watch npm install grunt-traceur-lat ...

  9. ES6 实战项目构建 ES6+glup+express

    ES6推出已经有几个年头了,平时也有学过一些基本语法,无奈实践经验太少.而且前端早已脱离了刀耕火种的时代,一些自动化构建工具像gulp.webpack等也需要熟练掌握.最近刚签了三方,闲暇之余就找了个 ...

随机推荐

  1. 自己动手写文件查找,字符串查找,查询jar包等工具

    文件查找——搜索当前目录下的文件 知道大概的文件名称,使用 findf FileName findf.py import argparse, re, os from os.path import jo ...

  2. 【性能诊断】十一、性能问题综合分析(案例2,windbg、wireshark)

    [问题描述]:       前段时间有一项目反馈,常用的审批功能有时的响应较慢,多个管理员功能不定期的出现客户端无响应的状况,并且管理员功能一旦出现卡死,也会影响到普通的业务用户致使很多用户无法操作. ...

  3. 关于playmaker play animation出现警告 The AnimationClip 'xxx' used by the Animati ...

    转载自网络: 出现这个提示: The AnimationClip 'xxx' used by the Animation component 'xxx' must be marked as Legac ...

  4. Android 与 Webservice 的快速保存

    前面写了一篇android对sqllite的快速保存博客,今天我们来看看android与webservice的交互,相信很多有经验的人自然就想到了soap.但是如果在小型项目中,具有大材小用之嫌.实际 ...

  5. 基于 USB 传输的针式打印机驱动程序开发

    1.引言 针式打印机曾经在相当长的一段时间占据打印机市场的主导地位,但是近年来由于喷墨.激光等非击打式打印机的冲击,针式打印机的市场份额逐年下降.即便如此,由于针式打印机在票据打印领域的不可取代性,同 ...

  6. maven 的 snapshot 和 release 的区别

    release 是发行版,通常正式发布使用. snapshot 快照版本.在开发过程中,每提交一次修改,编译好响应的jar包,都会更新到仓库中,所有添加了这个jar包的依赖都会把远程仓库里的jar包更 ...

  7. java构建学生管理系统(一)

    用java搭建学生管理系统,重要还是对数据库的操作,诸如增删改查等. 1.基本的功能: 老师完成对学生信息的查看和修改,完成对班级的信息的概览. 学生可以看自己的成绩和对自己信息的修改. 学生和老师有 ...

  8. filter过滤器实现验证跳转_返回验证结果

    1. 需求背景 需要对某个请求url进行拦截,模拟是否可以进入某一个接口,如果拦截需要返回数据false,别问我为何不用intercept拦截器. 2. web.xml <filter> ...

  9. Android学习之基础知识九 — 数据存储(持久化技术)之SQLite数据库存储

    前面一讲介绍了数据持久化技术的前两种:文件存储.SharedPreferences存储.下面介绍第三种技术:SQLite数据库存储 一.SQLite数据库存储 SQLite数据库是一款轻量级的关系型数 ...

  10. spring之Environment

    Spring 的Environment包含两方便的抽象,profile和 property 前者是一组bean的定义,只有相应的profile被激活的情况下才会起作用. 后者是提供方便的抽象,应用程序 ...