ES6 的第一个版本,就这样在 2015 年 6 月发布了,正式名称就是《ECMAScript 2015 标准》(简称 ES2015)
ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。
## Babel 转码器
可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。
下面的命令在项目目录中,安装 Babel。
npm install --save-dev @babel/core
--save 生产环境需要
--save-dev 开发环境需要
使用命令 --save 或者说不写命令 --save ,都会把信息记录到 dependencies 中;
dependencies 中记录的都是项目在运行时需要的文件;
使用命令 --save-dev 则会把信息记录到 devDependencies 中;
devDependencies 中记录的是项目在开发过程中需要使用的一些文件,在项目最终运行时是不需要的;
也就是说我们开发完成后,最终的项目中是不需要这些文件的;
Babel 的配置文件是.babelrc(自己手动新建),存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。
该文件用来设置转码规则和插件,基本格式如下。
{
"presets": [], // 不设置转码规则,Babel降级不生效
"plugins": [] // 插件
}
presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。
# 最新转码规则
npm install --save-dev @babel/preset-env
# react 转码规则
npm install --save-dev @babel/preset-react
然后,将这些规则加入.babelrc。
{
"presets": [
"@babel/env", // 必须安装npm install --save-dev @babel/preset-env
"@babel/preset-react" // 必须安装npm install --save-dev @babel/preset-react
],
"plugins": []
}
注意:以下所有 Babel 工具和模块的使用,都必须先写好.babelrc。
命令行转码工具
Babel 提供命令行工具@babel/cli,用于命令行转码。
# 安装
npm install --save-dev @babel/cli
# 转码结果输出到标准输出
$ npx babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib
# -s 参数生成source map文件
$ npx babel src -d lib -s
babel-node模块
@babel/node模块的babel-node命令,提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能,而且可以直接运行 ES6 代码。
首先,安装这个模块。
$ npm install --save-dev @babel/node
然后,执行babel-node就进入 REPL 环境。
$ npx babel-node
> (x => x * 2)(1)
2
babel-node命令可以直接运行 ES6 脚本。将上面的代码放入脚本文件es6.js,然后直接运行。
# es6.js 的代码
# console.log((x => x * 2)(1));
$ npx babel-node es6.js
2
@babel/register 模块
@babel/register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用 Babel 进行转码。
$ npm install --save-dev @babel/register
使用时,必须首先加载@babel/register。
// index.js
require('@babel/register');
require('./es6.js');
然后,就不需要手动对index.js转码了。
$ node index.js
2
需要注意的是,@babel/register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。