你真的会babel吗？babel是什么我们通常使用babel来将高版本的javascript代码（ES6+）转换成ES

babel是什么

我们通常使用babel来将高版本的javascript代码（ES6+）转换成ES5的代码，因为有的浏览器不支持ES6+一些新的语法和API

安装

在你的工程文件下执行

npm install --save-dev @babel/core @babel/cli @babel/preset-env

或者

yarn add  @babel/core @babel/cli @babel/preset-env -D

@babel/cli是Babel命令行转码工具，如果我们使用命令行进行Babel转码就需要安装它。
@babel/cli依赖@babel/core，因此也需要安装@babel/core这个Babel核心npm包。
@babel/preset-env 这个预设主要用来转译esnext到目标环境支持的js，所以这个预设基本都要安装

怎么配置

前提

💡 1. presets 预设数组，pulgins 插件数组，

每个插件或预设都是一个npm包
预设是一组Babel插件的集合，预设也可以是插件和其它预设的集合

很多配置文件以rc结尾，rc是运行控制文件 run control的意思
babel一般配置的时候默认可以使用短名称，但是还是推荐使用全称

插件@babel/plugin-xxx,短名称可以写成@babel/xxx，甚至可以缩写到xxx

预设@babel/preset-env的短名称就是@babel/env，甚至可以缩写到env

要使用对应的预设或者插件的话要执行npm install 插件/预设或者yarn add 插件/预设进行安装

执行顺序

插件比预设先执行
插件执行顺序是插件数组从前向后
预设是从后向前

配置文件

Babel执行时会默认在当前目录寻找的Babel配置文件(以下配置方法选择其一就好)

例子中的es2015是babel7前的用法，

babel.config.js

module.exports = {
    "presets": ["es2015", "react"],
    "plugins": ["transform-decorators-legacy", "transform-class-properties"]
  }

.babelrc

{
    "presets": ["es2015", "react"],
    "plugins": ["transform-decorators-legacy", "transform-class-properties"]
  }

.babelrc.js

module.exports = {
    "presets": ["es2015", "react"],
    "plugins": ["transform-decorators-legacy", "transform-class-properties"]
  }

还可以直接将配置参数写在package.json

{
    "name": "demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "babel": {
      "presets": ["es2015", "react"],
      "plugins": ["transform-decorators-legacy", "transform-class-properties"]
    }
  }

写在构建工具的配置里（eg：webpack）

rules: [
  {
    test: /\.js$/,
    use: {
      loader: 'babel-loader'
    },
  }
]

主要作用

语法转换

通过配置预设/插件来进行esnext的语法转换，常用的插件像@babel/preset-env

补齐API

💡 Babel默认只转换新的JavaScript语法（syntax），而不转换新的 API。

新的API分为两类，

一是Promise、Map、Symbol、Proxy、Iterator等全局对象及其对象自身的方法
二是新的实例方法，例如数组实例方法[1, 4, -5, 10].find((item) => item < 0)

如果想让ES6新的API在低版本浏览器正常运行，我们就需要做polyfill，来补齐不同浏览器之间的差异

有以下几种方法：

直接在html文件引入Babel官方的polyfill.js脚本文件；
在前端工程的入口文件里引入polyfill.js；
在前端工程的入口文件里引入@babel/polyfill；
在前端工程的入口文件里引入core-js/stable与regenerator-runtime/runtime；（ @babel/polyfill本质是由两个npm包core-js与regenerator-runtime组合而成的）
在前端工程构建工具的配置文件入口项引入polyfill.js；
在前端工程构建工具的配置文件入口项引入@babel/polyfill；
在前端工程构建工具的配置文件入口项引入core-js/stable与regenerator-runtime/runtime；

实践

一个完整的Babel转码工程通常包括如下：

Babel配置文件
Babel相关的npm包
需要转码的JS文件

参考

本文大多数都是参考这个babel教程，写得很详细，建议有空的同学可以看一下

你真的会babel吗？