Babel基础使用

babel主要模块说明

• babel-preset-env

简单说明就是：

babel-preset-env = babel-preset-latest = babel-preset-es2015 + babel-preset-es2016 + babel-preset-es2017

官网说明原文：

Without any configuration options, babel-preset-env behaves exactly the same as babel-preset-latest (or babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017 together).

• babe-cli

作用：命令行转码
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

• babel-polyfill

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

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

在入口文件处首先加载babel-polyfill
import 'babel-polyfill';
// 或者
require('babel-polyfill');
//再执行入口文件的其他程序

搭建es6+react环境

安装依赖

npm install --save-dev babel-preset-env
npm install --save-dev babel-preset-react
npm install --save-dev babel-cli
npm install --save-dev babel-polyfill

.babelrc配置

{
    "presets": [
        "env",
        "react"
    ],
    "plugins": [
        
    ]
}

在入口文件加入如下一行代码

import 'babel-polyfill';
// 或者
require('babel-polyfill');