一、babel
1.1 概念
:::info
- 将ES6的代码转化为es5代码,让浏览器可以支持
babel 只会解析 js 语法,具体的语法实现还需通过preset 和 plugins 实现 :::
1.2 安装
(1)根据文档的
webpack
构建教程npm i babel-loader @babel/core -D
(2)安装npm i @babel/preset-env -D
:::info@babel/preset-env
babel的预设,集成了 es6 -> es5 实现的库 ::: 这个库知道:将 let、const、var等es6的语法转化为es5的语法
(3)安装npm i @babel/polyfill -D
将所有es6新特性的函数:promise、then、map、reduce等
; 用es5方法重写的函数库1.3 配置解释
babel-loader
:
不能翻译js代码;作用:是webpack
和Babel
之间通信的桥梁
exclude: /node_modules/
:
1.4 @babel/polyfill:
1.4.1 全局引入polyfill:
**import '@babel/polyfill'**
将所有es6新特性的函数用es5方法重写的函数库,import '@babel/polyfill'
表示将库中所有的代码都进行引入
使用:在js代码中import '@babel/polyfill'
使用polyfill
翻译es6新特性的代码:增加代码打包的体积
1.4.2 按需配置使用polyfill
:
polyfill 按需使用方法重写:::info 按需引入:
- import ‘@babel/polyfill’ 引入所有es6 方法的重写,体积过大
- 在 preset 配置
useBuiltIns:'usage'
按需引入@babel/polyfill
中方法重写 源代码用到那个方法函数,从
polyfill
中引入对应的方法 :::useBuiltIns: 'usage'
:::info 通过如下配置:告诉
polyfill
遇到代码中的es6特性的代码,按需引入重写的函数,而不是一次引入所有的函数 :::**webpack.config.js**
中配置.babelrc//babel.config.json
中配置{
"presets": [
[
// 预设,包含es6+代码转为es5-代码插件集合
"@babel/preset-env",
// 配置
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
// 设置按需引入
"useBuiltIns": "usage",
// 使用的core-js的版本号
"corejs": "3"
}
]
],
"plugins": []
}
:::info
**core-js**
文件中不同的 .js 文件 对应不同的 es6 新特性方法的实现,
- 因此可以通过 按需引入的方式,进行实现
:::
二、babel进一步理解
2.1 按需引入报错问题
报警告问题:
此时的意思是删除 全部引入import '@babel.poyfill'
解决报警告:(1)设置corejs
版本号 (2)删除 全局引入polyfill
原因:插件会自动按需引入2.2 polyfill的本质
@babel/polyfill
- 实现了库
corejs + regenerator
,将这两个库整合,库:将es6新特性的代码,通过es5的方法进行实现2.2.1 配置了polyfill的按需引入
(1)需要安装npm i core-js -D
解决 如下报错问题:
(2)报错:删除import '@babel/polyfill'
无法找到core-js这个库了,需要手动配置引入
2.3 解决全局污染的情况
2.3.1 解决思想:
通过transform-runtime
在corejs
对es6新特性进行编译时,将全局的promise、map实现的变量名称改变、
例如:源代码new Promise
-> new Promise + 改变名称
源代码new map
-> new map1
2.3.2 如何使用:
- 开发环境下:
npm i @babel/plugin-transform-runtime -D
- 生产环境下:
npm i @babel/runtime -S
- 配置:防止第三方 命名污染全局环境
防止二者的@babel/poyfill
冲突;因为transform-runtime
会提供另一种版本的@babel/poyfill
。。。
2.4 单独创建Babel 的配置文件
三、插件介绍
3.1 core-js
是一个库,本质上通过es5的方法实现了所有es6方法函数的新特性,以便低版本浏览器能够兼容
但是:core-js 没有实现 es6 的 generator
方法的特性;因此:需要搭配regenerator
来,完整配合
3.2 regenerator
通过 es5 方法实现了 es6 的 generator
的新特性
3.3 @babel/polyfill
将 core-js
库 和 regenerator
库 进行了整合;
3.3.1 污染全局环境:
@babel/polyfill
实现es6新特性的方法时会污染全局环境
见上:解决 全局环境的污染问题