ECMAScript 和 JavaScript 的关系?
一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?
要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。
该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。
因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 JScript 和 ActionScript)。日常场合,这两个词是可以互换的。
Babel 转码器
Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});
上面的原始代码用了箭头函数,Babel 将其转为普通函数,就能在不支持箭头函数的 JavaScript 环境执行了。
下面的命令在项目目录中,安装 Babel。
$ npm install --save-dev @babel/core
配置文件.babelrc
Babel 的配置文件是.babelrc
,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。
该文件用来设置转码规则和插件,基本格式如下。
{
"presets": [],
"plugins": []
}
presets
字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。
# 最新转码规则
$ npm install --save-dev @babel/preset-env
# react 转码规则
$ npm install --save-dev @babel/preset-react
然后,将这些规则加入.babelrc
。
{
"presets": [
"@babel/env",
"@babel/preset-react"
],
"plugins": []
}
命令行转码
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
命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。
polyfill
Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如Iterator
、Generator
、Set
、Map
、Proxy
、Reflect
、Symbol
、Promise
等全局对象,以及一些定义在全局对象上的方法(比如Object.assign
)都不会转码。
举例来说,ES6 在Array
对象上新增了Array.from
方法。Babel 就不会转码这个方法。如果想让这个方法运行,可以使用core-js
和regenerator-runtime
(后者提供generator函数的转码),为当前环境提供一个垫片。
安装命令如下。
$ npm install --save-dev core-js regenerator-runtime
然后,在脚本头部,加入如下两行代码。
import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime');
Babel 默认不转码的 API 非常多,详细清单可以查看babel-plugin-transform-runtime
模块的definitions.js文件。
浏览器环境
Babel 也可以用于浏览器环境,使用@babel/standalone模块提供的浏览器版本,将其插入网页。
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
注意,网页实时将 ES6 代码转为 ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本。
Babel 提供一个REPL 在线编译器,可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。
以上均为作者:阮一峰对于ECMAScript 6 的简介。
Babel在项目中怎么去使用以及配置的规则,在下面展开说。
1.首先全局安装Bable工具,命令
//全局安装调用
npm install --g @babel/cli
babel index.js -o output.js
//本地安装调用
npm install --save-dev @babel/cli
npx babel index.js -o output.js
babel --version //下载完成后查看版本
2.选定要编译的文件,然后在这个文件夹同级别下建一个文件名字为 .babelrc
3.创建好后,在.babelrc中编辑内容,在项目中安装转码器
{
"presets": ["es2015"], //预设
"plugins": [] //插件
}
插件比预设先执行;
插件执行顺序是插件数组从前向后执行;
预设执行顺序是预设数组从后向前执行;
npm install --save-dev babel-preset-es2015
Babel提供了预设(presets)的概念,意思就是预先设置好的一系列插件包;比如@babel/preset-es2015就是用来将部分ES6语法转换成ES5语法,还有其他可选择的预设
官网预设(Presets) · Babel 中文文档 | Babel中文网
实际会用到的预设有以下:
-
@babel/preset-env(默认情况下,@babel/env等于@babel/preset-es2015、@babel/preset-es2016和@babel/preset-es2017三个套餐的叠加。)
-
@babel/preset-flow
-
@babel/preset-react
-
@babel/preset-typescript
4.转码
命令行转码
首先我们在要转码的文件夹同级别建一个文件夹叫做dist
//转码结果写入一个文件
babel es6/1.js -o dist/2.js //-o 1.js文件转码到2.js
//整个目录转码
babel es6 -d dist //-d es6里面的所有文件将被转码到dist文件下
@babel/core是Babel进行转码的核心依赖包。
@babel/core中包含多个模块,而实现转码功能的主要模块为以下三个:
@babel/parser 、 @babel/traverse 、 @babel/generator
@babel/parser 接收源码,进行词法、语法分析,生成AST树(不支持扩展,官方维护)
@babel/traverse 接受⼀个AST,并对其遍历,根据babel配置中的preset、plugin进⾏逻辑处理,生成最终的AST树
@babel/generator 接收最终⽣成的AST,并将其转换为代码字符串,同时此过程也可以创建source map