ES6转ES5之Babel

版权声明： https://blog.csdn.net/huangpb123/article/details/81298419

很多低版本的浏览器不支持 ES6 语法，这就需要用到 Babel 转码器把 ES6 代码转换成 ES5。

在 Babel6 之前，Babel 是一个整体。但在 Babel6 中，将 Babel 拆分成两个包：babel-cli 和 babel-core。如果你想在 CLI（终端或 REPL）使用 Babel 就下载 babel-cli，如果想在 node 中使用就下载 babel-core。

一、安装 Babel

npm i --save-dev babel-core

二、配置 .babelrc 文件

Babel 的配置文件是 .babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。该文件用来设置转码规则和插件。

// .babelrc

{
    "presets": [
        "env",
        "stage-0",
        "stage-1",
        "react"
    ],
    "plugins": [
        "transform-runtime",
        "babel-plugin-transform-regenerator",
        "transform-decorators-legacy",
        "react-hot-loader/babel"
    ],
    "ignore": [
        "moment"
    ]
}

presets 字段

presets 字段设定转码规则，官方提供以下规则集，你可以按需安装 NPM 包。

// ES2015,ES2016,ES2017转码规则
"babel-preset-env"

// react转码规则
"babel-preset-react"

// ES7不同阶段语法提案的转码规则（选装一个）
"babel-preset-stage-0"
"babel-preset-stage-1"
"babel-preset-stage-2"
"babel-preset-stage-3"

然后把这些规则加入到 .babelrc 的 presets 中。