Babel学习

一、简介
- 1. Babel是什么？
- 2. 整体介绍
二、presets(环境预设)
- 常用的环境预设包
三、plugins(插件)

一、简介

1. Babel是什么？

Babel是一个编译器，可以将ES6+版本新增加的语法和API转化成ES5代码，让前端开发者可以提前使用ES6+的新特性而不用考虑兼容性问题。

在 Babel7 中，如果使用 .babelrc 配置Babel，默认排除 node_modules
可以使用 babel.config.json 代替 .babelrc，来拒绝这个问题。

在Babel 7 中，配置文件分为应用级别的配置文件和文件级别的配置文件，.babelrc 默认是文件级别的配置，babel.config.json 默认是应用级别的配置。

2. 整体介绍

Babel本身没有任何编译功能，而是通过选项：环境预设和插件，对代码进行编译的。
Babel转换分为两部分：

语法转换
可以通过配置环境预设(presets)，实现对js新语法的转换。
例如：const, let, 扩展运算等。
API转换
可以通过配置插件(plugins)，实现对js新API的转换。
例如：Promise, 实例方法(includes())等

二、presets(环境预设)

通过选项——presets对Babel进行环境预设，实现对一组新语法特性的支持。可以根据项目实际情况设置多个预设。
如果设置了多个预设，预设的执行顺序的从后向前的。

例如：

支持ES6+的新语法，需要配置@babel/preset-env，支持ES5以上的所有新语法。
低于state3 的特性不会被支持，如果想要使用，需要单独为该特性安装并配置插件。
在使用React框架的情况下，需要配置@babel/preset-react，支持jsx语法。.

在Babel7之前的版本中，对于未发布的特性也可以设置预设，但是，Babel7中已经不在支持。

stage0 只是一个想法，有 Babel 插件实现了对这些特性的支持，但是不确定是否会被定为标准；
stage1 值得被纳入标准的特性；
stage2 该特性规范已经被起草，将会被纳入标准里；
stage3 该特性规范已经定稿，各大浏览器厂商和 Node.js 社区开始着手实现；
stage4 在接下来的一年将会加入到标准里去。

常用的环境预设包

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

三、plugins(插件)

通过选项——plugins对Babel进行插件配置，转换新API。插件如果配置了多个，他的执行顺序是从前往后的。

支持ES新API：
1、使用@babel/preset-env，配置 useBuiltIns 参数的方式
@babel/preset-env的配置参数：
1.1、 targets:
支持的浏览器

1.2、useBuiltIns:
useBuiltIns项取值可以是"usage" 、 “entry” 或 false(默认)。和polyfill的行为有关系。

1） false:
默认值，不处理api。

2）entry:
全部引入polyfill，需要在入口文件引入 polyfill。如何引用由 corejs 版本决定，详情查看 3. corejs 参数介绍。

3）usage:
按需引入polyfill，不用引入@babel/polyfill。

Babel 编译通常会排除 node_modules，所以 “useBuiltIns”: “usage” 存在风险，可能无法为依赖包添加必要的 polyfill。

{"presets": [["@babel/preset-env",{"modules": false,"useBuiltIns": "usage","corejs": "3","targets": ">0.2%, not dead, Firefox >= 52, IE >= 8"}]],
}

1.3、 corejs：
取值为2(默认)和3，只在useBuiltIns: "entry | usage"时有效。

需要注意的是：
1) corejs取值为2
如果安装了 @babel/polyfill 不用在额外安装 core-js@2，因为 @babel/polyfill 模块包含 core-js 和一个自定义的 regenerator runtime 。

// babel 配置
{"presets": [["@babel/preset-env",{"modules": false,"useBuiltIns": "entry","corejs": 2,}]],
}// 安装 @babel/polyfill
npm i @babel/polyfill -S// 入口处引入
import '@babel/polyfill';

2) corejs取值为3
必须安装core-js@3版本才可以，否则Babel会转换失败并提示：
@babel/polyfill is deprecated. Please, use required parts of core-js and regenerator-runtime/runtime separately

// babel 配置
{"presets": [["@babel/preset-env",{"modules": false,"useBuiltIns": "entry","corejs": 3,}]],
}// 安装 core-js@3
npm i core-js@3 -D// 入口处引入
import 'core-js/stable'
import 'regenerator-runtime/runtime'

1.4、 modules:
该项用来设置是否把ES6的模块化语法改成其它模块化语法。
取值为：“amd”、“umd” 、 “systemjs” 、 “commonjs” 、“cjs” 、“auto” (默认)、false。
默认代码里import都被转码成require。

如果我们将参数项改成false，那么就不会对ES6模块化进行更改，还是使用import引入模块。

使用ES6模块化语法有什么好处呢？
在使用Webpack一类的打包工具，可以进行静态分析，从而可以做tree shaking等优化措施。

上面配置方式的问题有哪些？
1）全局污染问题
babel 的 polyfill 机制是，对于例如 Array.from 等静态方法，直接在 global.Array 上添加；对于例如 includes 等实例方法，直接在 global.Array.prototype 上添加。这样直接修改了全局变量的原型，有可能会带来意想不到的问题。

2）代码重复
代码在编译的过程中会使用一些 helper (辅助函数)，会直接写在文件中，如果多个文件都是用了相同的语法，那个两个文件中都会有这个语法对应的 helper 。这种代码重复会造成文件尺寸增大。

那么如何来解决上面的两个问题呢？答案就是使用插件

@babel/runtime-corejs3
@babel/plugin-transform-runtime

删除内联 helper，运行时从 @babel/runtime-corejs3/helpers 模块中引入 helper，避免全局污染同时减少文件尺寸。

2、使用@babel/plugin-transform-runtime和@babel/runtime-corejs3

@babel/runtime-corejs3
@babel/runtime-corejs3/helpers 模块下的保存着 Babel 编译所需要的各种 helper，不再将 helper 内联到各个文件中去，直接从 @babel/runtime-corejs3/helpers 模块中入即可。
@babel/plugin-transform-runtime
删除内联 helper，从 @babel/runtime-corejs3/helpers 模块中引入 helper。
用法：

{"presets": [["@babel/preset-env",{"modules": false,"targets": ">0.2%, not dead, Firefox >= 52, IE >= 8"}]],"plugins": [["@babel/plugin-transform-runtime",{"corejs": "3","helpers": true,"regenerator": true}]]
}

2.1、@babel/plugin-transform-runtime 配置参数说明

1）corejs

2 | 3 | false(默认)。
指向选项的值为数字，即选择哪个版本的@babel-runtime-corejs:

配置corejs为3，需要预先安装@babel/runtime-corejs3
配置corejs为2，需要预先安装@babel/runtime-corejs2
配置corejs为false，需要预先安装@babel/runtime

2）helpers
true(默认) | false

从 @babel/runtime-corejs/helpers 模块中引入 helper。代替内联 helper。

3）regenerator
true(默认) | false

切换是否将generator函数转换为使用不污染全局作用的regenerator运行时。

参考文献：
https://juejin.cn/post/7033383643976630302

Babel学习之基础学习相关推荐

通道抠图怎么扣ps教程ps学习视频教程基础学习
通道抠图怎么扣ps教程ps学习视频教程基础学习
linux中断响应时间太慢_linux+arm系统学习与基础学习
先说说arm吧.先前学习linux+arm老是觉得arm次要的,学习arm和学习单片机一样,了解了中断,UART,AD,定时器就差不多了,工作重心主要在linux上面.随着时间的推移,学习的深入,自我 ...
java学习_Python基础学习教程：从0学爬虫？让爬虫满足你的好奇心
Python基础学习教程:从0学爬虫?让爬虫满足你的好奇心有必要学爬虫吗? 我想,这已经是一个不需要讨论的问题了. 爬虫,"有用"也"有趣"! 这个数据为王的 ...
深度学习-计算机视觉-基础学习笔记-01
图像分类的思想:收集大量已知图像数据并带有正确的标签,将以往通过一个函数传入一张图片并返回图片的类型的这个思想转变成,通过俩个函数,第一个函数传入大量的图片并通过该函数训练返回一个模型,该模型通过训练 ...
NLP学习D2-TF2基础学习-北大教程
今天主要学tf2和动手实践:如果有时间,看下Transformer系列的细节!!加油! 一.环境配置老师很贴心,带着装环境. 1.我建个github仓库~ 2.设置了一个conda的默认清华镜像参 ...
[AngularJS学习笔记] 基础学习01
2016-06-06开始学习AngularJS AngularJS是会extend HTML的 ng-directives 先学习了四个 ng-app:定义AngularJS Application的 ...
ps去掉多余的人物#ps抠图#ps去除抠图教程学习入门基础学习
ps去掉多余的人物#ps抠图#ps去除抠图教程学习
Python学习---线程基础学习
线程基础什么是线程(thread) 线程是CPU调度能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流[换言之,线程就是一堆指令集合], ...
java学习o_基础学习之---Java I/O学习(一)
File类一个File类的对象,表示了磁盘上的文件或目录. File类提供了与平台无关的方法来对磁盘上的文件或目录进行操作. import java.io.*; class FileTest { p ...

Babel学习之基础学习