Babel学习笔记

这是Babel教程 - 姜瑞涛的官方网站配套的代码。

在教程里转码命令大部分使用npx babel main.js -o compiled.js进行的，下载本项目代码后，除了可以用该命令进行转码，也可以在相应的例子文件夹下执行npm install命令安装npm包后，使用npm run dev进行转码。在package.json文件里，npm run dev指向了npx babel main.js -o compiled.js命令。

Babel转换分为两种

语法转换

把ES6的箭头函数语法转换成了ES5的函数定义语法。箭头函数语法、async函数语法、class定义类语法和解构赋值等等都是ES6新增的语法,因为Babel默认只转换新的JavaScript语法（syntax），而不转换新的 API。示例：Bable01
补齐API

通过 Polyfill 的方式在目标环境中添加缺失的特性。新的API分类两类，一类是Promise、Map、Symbol、Proxy、Iterator等全局对象及其对象自身的方法，例如Object.assign，Promise.resolve；另一类是新的实例方法，例如数组实例方法[1, 4, -5, 10].find((item) => item < 0) , API转换需要引入polyfill。示例：Bable02

Babel版本

目前，前端开发领域使用的Babel版本主要的Babel6和Babel7这两个版本。

Babel7

包的安装名字：@babel/cli、@babel/core

Babel6

包的安装名字：babel-cli，babel-core

Babel配置文件

配置文件

Babel的配置文件是Babel执行时默认会在当前目录寻找的文件，他们的配置项都是相同，作用也是一样的，只需要选择其中一种。主要有以下文件类型：

.babelrc

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

.babelrc.js ,babel.config.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"]
    }
 }

插件与预设

plugin代表插件，preset代表预设，它们分别放在plugins和presets，每个插件或预设都是一个npm包。

Babel预设与插件的选择

preset预设的选择

Babel7.8官方的插件和预设目前有100多个，Babel官方的preset，我们实际可能会用到的其实就只有4个：

@babel/preset-env
@babel/preset-flow
@babel/preset-react
@babel/preset-typescript

一个普通的vue工程，Babel官方的preset只需要配一个@babel/preset-env就可以了。

plugin插件的选择

虽然Babel7官方有90多个插件，不过大半已经整合在@babel/preset-env和@babel/preset-react等预设里了，我们在开发的时候直接使用预设就可以了。

@babel/plugin-transform-runtime

bighb / Babel-note