ES6 -- Babel 转码器

前言

我们都知道，es6是JavaScript的下一代标准，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。

Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

配置文件 .babelrc

Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。基本格式如下

{
  "presets": [],  // presets字段设定转码规则
  "plugins": []
}

注意，以下所有 Babel 工具和模块的使用，都必须先写好.babelrc。

babel-cli

Babel 提供babel-cli工具，用于命令行转码。

npm install --g babel-cli

babel ./src/index.js -o ./src/main.js

babel-preset-es2015

上述编译其实并没有进行，而是原样输出。这是因为我们没有安装相应的插件，官方提示我们需要安装 babel-reset-es2015

npm install --save-dev babel-preset-es2015

babel-core

某些代码需要调用Babel的API进行转码，就要使用babel-core模块。

npm install --save-dev babel-core

babel-polyfill

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

npm install --save-dev babel-polyfill

然后，在脚本头部，加入如下一行代码。

import 'babel-polyfill'

image.png

总结

在前端工程化越来越流行的今天，es6 + vue/ng/react + webpack。已经成为主流。

es6只是第一步，就是需要了解babel，其实难就难在配置这里。愿大家共勉，一起攀登这一座座大山！