ES6学习笔记1--Babel转码器

Babel转码器

Babel是一个ES6转码器，可以将ES6代码转化为ES5代码，从而可以在老版本浏览器中执行。

• 配置文件 .babelrc，存放在项目的根目录下，该文件可以用来是指转码规则和插件。基本格式如下：

{
   //presets字段设定转码规则
   //最新转码规则：@babel/preset-env
   "presets":[
        "@babel/env",
        "@babel/preset-react"
    ], 
   "plugins":[]
}

• ​​​命令行转码 @babel/cli 

#安装命令
npm install --save-dev @babel/cli

#基本用法

##转码结果输出到标准输出
npx babel example.js

##转码结果写入一个文件
## --out-file 或 -o 参数指定输出文件
npx babel example.js --out-file complied.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

##执行命令进入REPL环境
npx babel-node

## 也可以直接运行ES6脚本
npx babel-node es6.js

• babel/register 模块 @babel/register

@babel/register模块改写require命令。每当使用require加载 .js、.jsx、.es和.es6后缀名的文件，就会先用Babel进行转码。

#安装命令
npm install --save-dev @babel/register

##首先加载@babel/register

###文件中引入@babel/register模块
###需注意：@babel/register只会对require命令加载的文件转码,而不会对当前文件转码。
###@babel/register为实时转码，所以只适合在开发环境中使用。

require("@babel/register");
require("./es6.js")

• polyfill

Babel默认制转换新的JavaScript语法，不转换新的API。如（Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象以及定义在全局对象上的方法都不会进行转码）。可以使用 core-js/ regenerator-runtime

Babel默认不转码API清单，查看babel-plugin-transform-runtime 模块的definition.js文件

#安装命令

npm install --save-dev core-js regenerator-runtime

##使用方式，在脚本头部引用

import 'core-js'
import 'regenerator-runtime/runtime'

or 

require('core-js')
require('regenerator-runtime/runtime')

• 浏览器环境

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

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

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//ES6 代码块
<script>