ECMAScript 6 是JavaScript 语言的下一代标准;发布于2015年,又称为ECMAScript 2015。
ECMAScript 方言还有 JScript 和 ActionScript。
ECMAScript 与 JavaScript 的关系:前者是后者的规范,后者是前者的一种实现。
一个完整的JavaScript实现 包含 ECMAScript 、DOM、 BOM 三部分。
- babel 转码器:
- Babel 是一个广为使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行;
//转码前
input.map(item => item +1); //转码后
input.map(function (item) {
return item + 1;
})
-
命令行环境
Babel 的命令行版本通过下面的命令安装:$ npm install --global babel-cli
$ npm install --save babel-preset-es2015
// 然后在当前目录下新建配置文件 .babelrc 并写入以下代码
{
"presets": ['es2015']
}Babel 自带一个babel-node 命令, 提供支持ES6 的 REPL 环境。它支持Node.js 的REPL环境的所有功能,而且可以直接运行ES6代码:
$ babel-node
console.log([1,2,3].map(x => x * x)) //[1 , 4, 9]babel-node 命令也可以直接运行 ES6脚本:(假设将上述代码写入es6.js中)
$ babel-node es6.js // [1, 4, 9]
babel 命令可以将 ES6代码 转换为 ES5 代码:
$ babel es6.js "use strict";
console.log( [1,2,3].map( function (x) {
return x * x;
}) )-o参数(或--out-file)可将转换后的代码从标准输出 重定向至文件
$ babel es6.js -o es5.js
#或者
$ babel es6.js --out-file es5.js-d参数 用于转换整个目录 (-d后面跟的是输出目录)
$ babel -d build-dir source-dir
-s参数 用于生成source map 文件
$ babel -d build-dir source-dir -s
-
浏览器环境
babel 也可以用于浏览器。 但是Babel6.0开始不再直接提供浏览器版本,而是要用构建工具构建出来;或者通过安装5.x 版本的babel-core模块获取。$ npm install babel-core@5
运行以上命令可在当前目录的 node_modules/babel-core/ 子目录下找到babel的浏览器版本browser.js(未精简) 和 browser.min.js(已精简)
然后插入以下代码到网页中:<script src="node-modules/babel-core/browser.js"></script>
<script type="text/babel">
// 书写es6 代码
</script>注意: 这种写法实时的将es6 转换为 es5,对网页性能有影响。 生产环境下需要加载已转码的脚本。
-
Node.js 环境
(1)先安装babel-core 和 babel-preset-2015$ npm install --save-dev babel-core babel-preset-2015
(2)然后在项目根目录下新建 .babelrc 文件
{
"presets":["es2015"]
}(3)最后在脚本中调用babel-core的 transform 方法
var es5Code = 'let x = n => n + 1';
var es6Code = require('babel-core')
.transform(es5Code, {presets: ['es2015']})
.code;
//' "use strict"; \n\n var x = function x(n) {\n return n+1; \n}; '方法二:
Node 脚本还有一种特殊的babel用法,即把babel加载为require 命令的一个钩子
执行完(1)(2)之后,在应用的入口脚本( entry script )头部加入下面语句:require("babel-core/register");
有了上面这个语句,后面所有通过require命令加载的后缀名为 .es6 .es .jsx .js 的脚本都会先通过babel转码再加载;
-
在线转换
Babel提供了一个REPL在线编译器, 将ES6代码转换为es5代码后 插入到网页中运行。
- Babel 是一个广为使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行;
相关文章
- 01-28《ES6标准入门》读书笔记 第5章 - 正则增强
- 01-28《ES6标准入门》(阮一峰)--4.字符串的扩展
- 01-28《ES6标准入门》(阮一峰)--5.字符串的新增方法
- 01-28ES6标准入门 字符串的扩展
- 01-28《ES6标准入门》学习总结
- 01-28【早读汇】上海@jean-lee《ES6标准入门》笔记
- 01-28ES6标准入门 第一章:简介
- 01-28ES6标准入门 第四章:字符串的扩展
- 01-28ES6标准入门之变量的解构赋值简单解说
- 01-28【学习笔记】ES6标准入门