阮一峰ES6旅程：入门布局

ES6摘录，学无止境，温故知新。有益之处，欢迎点赞收藏，有错之处，请多多指正！

1.Babel转码器

可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。

//转码前
input.map(item => item + 1);
 
//转码后
input.map(function(item){
  return item + 1;
});

安装Babel

npm install --save-dev @babel/core

2.配置文件.balbelrc

Babel 的配置文件是.babelrc，存放在项目的根目录下。

用来设置转码规则和插件，格式如下：

{
  "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工具和模块的使用，都必须先写好.babelrc

3.命令行转码

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

4.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

5.@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命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。

6.polyfill

Babel默认只转换新的js句法(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');

7.浏览器环境

Babel也可以用于浏览器环境，使用@babel/standlone模块提供的浏览器版本，将其插入网页。

<script type="text/babel">
// Your ES6 code
script>

注意：网页实时将 ES6 代码转为 ES5，对性能会有影响。生产环境需要加载已经转码完成的脚本。

Babel 提供一个REPL 在线编译器，可以在线将 ES6 代码转为 ES5 代码。转换后的代码，可以直接作为 ES5 代码插入网页运行。