2021.11.01
babel的作用
babel是一个工具链，主要将我们业务里面使用的ES6\ES7\ES8等等语法来编写的代码转换为向后兼容的javascript语法，比如转换成ES5
1. 语法转换
2. 通过垫片（polyfill）方式在目标环境中添加缺失的特性（比如babel-core负责转换语法部分，但是api未转换，此时我们就需要引入第三方polyfill模块，比如core-js）
3. 源码转换
通俗点就是比如ES6+的语法转换（如使用箭头函数->普通函数，let,const->var）
比如ES6+的新方法转换（如使用Array.includes等）
babel7变更
在早期babel6时期，我们经常使用babel-cli这类库（中间使用短线连接），但是到了babel7之后，我们所需要的所有babel模块都是作为独立的npm包发布的，都是以"@babel/xxx"来命名。
核心库(@babel/core)
babel这个工具的核心功能包含在"@babel/core"这个模块中，意味着我们必须安装，但不需要最后打包进bundle,只是在开发下帮我们转换，即：
npm install @babel/core -D
命令行工具(@babel/cli)
它就是一个能够从终端（命令行）使用的工具，类似webpack-cli等等，一般独立转换需要安装，通常在业务中我们都是搭配webpack来进行执行，所以这个工具对项目来说我理解可安可不安，但是不确定webpack或者其他依赖babel的库是否依赖@babel/cli，官网也建议安装在本地项目中，即：
npm install @babel/cli -D
在我们大多数的项目中，经常看到对babel的配置一般可以写在：
-
写在babel-loader的options中，进行配置
{ test:/\.js$/i, loader:'babel-loader', options:{ presets:[], plugins:[] } } -
项目范围的配置（project-wide-config）
这是babel7.x新配置方式，推荐使用 babel.config.json(.js,.cjs,.mjs)具体内部根据后缀名的对应方式书写，比如.cjs就是个module.exports,.json就是个json格式等等 它是项目的根配置，具体看文档描述 -
文件关联配置（file-relative-config）
推荐使用.babelrc(.babelrc.json)\(.js,.cjs,.mjs) 或者package.json中的bebel关键字配置
具体可以看https://github.com/willson-wang/Blog/issues/100
总结来说就是独立项目（非menorepo）下我们在项目根目录下配置一个根目录配置，如babel.config.json(.js,.cjs,.mjs)
若是一个lerna menorepo项目，也同样在根目录下babel.config.json(.js,.cjs,.mjs)，子项目可以使用.babelrc指定编译
而这些配置项中，最常见的就是两个配置"preset"&“plugins”
preset（预设）- 插件集合
1. 最初我们都是通过安装plugins来解决翻译，比如@babel/plugin-transform-arrow-functions这个插件就是让我们写的箭头函数翻译为普通函数，但是若其中我们使用了let,const等新语法并未给我们转换，babel奉行一个插件做一个事，这样的话，es6+新增的东西太多了，岂不是需要一个一个插件的引用？
2. 因此babel提出了preset（预设）-它是一类插件的集合，等于说安装它一个就不需要安装其他相同类型的插件了
3. 即官网提供了常用了环境一些预设preset，如：
3.1 @babel/preset-env（转换ES6+的语法，注意是语法！！！）
3.2 @babel/preset-typescript（转换TS）
3.3 @babel/preset-react（转换React）
3.4 @babel/preset-flow（转换Flow）
4. 如何设置preset(首先preset是一个数组格式)
{
// 4.1 字符串配置（外层数组包裹）
"preset":["@babel/preset-env"]
// 4.2 数组字符串配置（（外层数组包裹））
"preset":[
["@babel/preset-env"]
]
// 4.3 数组第0个参数是插件，第1个是配置项（外层数组包裹）
"preset":[
[
"@babel/preset-env",
{
"modules": false
}
]
]
}
同时@babel/preset-env 是根据浏览器的不同版本中缺失的功能确定代码转换规则的，在配置的时候我们只用配置需要支持的浏览器版本就好了，@babel/preset-env 会根据目标浏览器生成对应的插件列表然后进行编译，如：
presets: [
["@babel/preset-env", {
targets: {
browsers: ["last 10 versions", "ie >= 9"]
}
}],
],
5. preset解析顺序
preset顺序是从后往前的，如：
{
"preset":["@babel/preset-env", "@babel/preset-react"]
}
将按如下顺序执行： 首先是 @babel/preset-react，然后是 @babel/preset-env。
刚刚我们利用了@babel/preset-env解决了ES6+的语法问题，但实际中我们可能需要使用ES6+的新方法，那么此时@babel/preset-env不能解析，它只负责解析语法，因为babel将js语法分为了：
syntax（类似箭头函数、let、const、class 等在 JavaScript 运行时无法重写的部分，就是 syntax 句法）
api（类似 Promise、includes 等可以通过函数重新覆盖的语法都可以归类为 api 方法）
因此，针对这种情况，社区提出了使用polyfill垫片解决
实验1（通过@babel/core @babel/preset-env）
npm install @babel/core @babel/preset-env -D
// src/index.js
const fn = () => console.log(1);
fn();
const pro = new Promise()
const isIncludes = [1, 2, 3].includes(2)
// babel.config.json
{
"plugins":[],
"presets":[
"@babel/preset-env"
]
}
// bundle.js
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
/*!*********************!*\
!*** ./src/main.js ***!
\*********************/
var fn = function fn() {
return console.log(1);
};
fn();
var pro = new Promise();
var isIncludes = [1, 2, 3].includes(2);
/******/ })()
;
// 结论
可以看出@babel/preset-env在语法上将const/let -》var，将箭头函数转换成了普通函数，而Promise和includes没转换
@babel/polyfill
1. 作用：Babel默认只转换新的javascript语法，而不转换新的API，比如 Iterator, Generator, Set, Maps, Proxy, Reflect,Symbol,Promise 等全局对象。以及一些在全局对象上的方法(比如 Object.assign)都不会转码。
比如说，ES6在Array对象上新增了Array.form方法，即当运行环境中并没有实现的一些方法，babel-polyfill会做兼容。
2. 原理：通过向全局对象和内置对象的prototype上添加方法来实现的。比如运行环境中不支持Array.prototype.find 方法。
3. 缺点：就是会造成全局空间污染
1. @babel/polyfill由"core-js"和"regenerator-runtime/runtime"两部分组成，其中
"core-js"：解决 promise 和 includes 相关的垫片
"regenerator-runtime/runtime"：解决await/async和Generator相关的垫片
2. 依赖安装
npm i @babel/polyfill -S（需要安装到dependencies）
3. 搭配使用
3.1 在我们的入口文件中，还必须引入import "@babel/polyfill"（早期）而在babel7.4之后废弃了该直接引入方式，转而必须显式的引入两个依赖库
import 'core-js'
import 'regenerator-runtime/runtime'
3.2 同时需要搭配@babel/preset-env这个preset使用，提供了"corejs"和"useBuiltIns"两个配置项
3.2.1 corejs：默认不设置则为corejs2，有些特性并不包含在2中，因此官方推荐设置为3版本
3.2.2 useBuiltIns：转换方式设置
3.2.2.1 false：默认值。不转化 api，只转化 syntax
3.2.2.2 usage - 转化源码里用到的 api
3.2.2.3 entry - 转化所有的 api
根据官方文档中，针对useBuiltIns设置描述，跟我上面3.1有点冲突，设置成"false"时：需要在webpack的entry设置@babel/polyfill独立打包；设置成"usage"时：则不需要在webpack中配置；
设置成"entry"：则需要显示在入口文件顶部引入polyfill
4. 总结来说@babel/polyfill需要与@babel/preset-env的options搭配使用,常用的配置如下，具体可以看文档：
{
"preset":[
["@babel/preset-env",{
corejs:3 // 设置polyfill核心版本 或者"3.8.2"最好指定特定版本 不然设置3就默认为"3.0"
useBuiltIns:'usage' // 设置转换方式
target:{
browsers: ["last 10 versions", "ie >= 9"]
} // 设置目标浏览器以减少兼容代码处理避免过多引入hack代码数量
modules: false // 默认是auto，在设置false情况下，可能有利于进行tree shaking
shippedProposal:true // 当‘usage’时需要设置该项为true
}]
]
}
这里我们指定了corejs@3,那么必须安装依赖
npm install core-js -S
npm uninstall @babel/ployfill
安装完后，我们就可以不需要@babel/polyfill了，也不需要在任何位置引入了，若我们没有对@babel/preset-env设置options时，那么我们想ployfill就只有按上面的显式引入
实验2(加入@babel/polyfill)
npm install @babel/polyfill -S
// src/index.js
import 'core-js';
import 'regenerator-runtime/runtime';
import './b'
const fn = () => console.log(1);
fn();
const pro = new Promise();
const isIncludes = [1, 2, 3].includes(2);
class A {}
// src/b.js
export default class B {}
// bundle.js
引入core-js 导入了./node_modules/core-js/modules/全量包（没用到也导入）；
引入regenerator-runtime/runtime 导入了很多没使用的runtime代码；
针对_classCallCheck这个hack函数分别在两个模块里面都声明了，造成浪费，并未提为公共。
// 结论
重复引入；全量引入，造成Bundle过大
实验3(卸载@babel/polyfill，加入core-js更改preset-env配置)
npm uninstall @babel/polyfill
npm install core-js -S
// babel.config.json
{
"plugins":[],
"presets":[
[
"@babel/preset-env",{
"useBuiltIns":"usage",
"corejs":"3.19.0",
"targets": {
"browsers": ["last 10 versions", "ie >= 9"]
}
}
]
]
}
// bundle.js
发现跟polyfill方式差不多，效果不理想
// 结论
但是省去了我们手动在入口文件引入
基于polyfill的弊端，社区又推出了@babel/runtime插件
@babel/runtime配合babel-plugin-transform-runtime
1. @babel/runtime：它是将es6编译成es5去执行。我们使用es6的语法来编写，最终会通过babel-runtime编译成es5.也就是说，不管浏览器是否支持ES6，只要是ES6的语法，它都会进行转码成ES5.所以就有很多冗余的代码。它不会污染全局对象和内置对象的原型，比如说我们需要Promise，我们只需要import Promise from 'babel-runtime/core-js/promise'即可，这样不仅避免污染全局对象，而且可以减少不必要的代码。
2. babel-plugin-transform-runtime：它就可以帮助我们去避免手动引入 import的痛苦，并且它还做了公用方法的抽离。比如说我们有100个模块都使用promise，但是promise的polyfill仅仅存在1份。
注意：@babel/runtime是为了替换@babel/polyfill 全量引入及全局变量覆盖引入，即需要安装-S
babel-plugin-transform-runtime插件是为了提取公共部分的runtime代码，编译阶段-D
npm install @babel/runtime -S
npm install babel-plugin-transform-runtime -D
实验4(安装@babel/runtime及babel-plugin-transform-runtime)
// webpack.config.js
rules:[
{
test:/\.js$/,
use:'babel-loader',
exclude:'/node_modules/' // 注意此处
}
]
// src/index.js
const fn = () => console.log(1);
fn();
Promise.resolve().then(() => {
console.log(123123)
})
const isIncludes = [1, 2, 3].includes(2);
console.log(isIncludes)
class A {}
// babel.config.json
{
"plugins": [
[
"@babel/plugin-transform-runtime"
]
],
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"shippedProposals": true,
"corejs": {
"version": "3.19.0",
"proposals": true
},
"targets": {
"browsers": ["ie >= 9", "android >= 4", "ios >= 9", "and_uc >= 10"]
},
"modules": false
}
]
]
}
// 打包后
在vendor.js中明显的看到引入了很多core-js里面的东西，在作polyfill
源文件中的let -》 var, 箭头函数 -》普通函数 ，class类 -》_classCallCheck()，Promise跟includes没变化
但是加载报错：ES Modules may not assign module.exports or exports.*, Use ESM export syntax
// 结论
看起来像是esmodule跟commonjs不兼容的问题，也是找了很久发现有人提出了在我们的babel-loader配置exclude时，大多数我们都是
exclude:'/node_modules/'这样配置，需要改成：
// webpack.config.js
rules:[
{
test:/\.js$/,
use:'babel-loader',
exclude:'/node_modules[\\\/]core-js/' // 注意此处
}
]
改成这样后，打包成功在google下面跑起来了，但是当我放到IE里面时，居然报错，跑不起来，明明我们设置了browsers ie9兼容，此时我还是以为是babel没处理好编译，结果一直搜索babel转译的问题，直到我想起来我是webpack5最新版本，然后就去了webpack官网配置项查看，终于还是发现了target这个选项，不设置的话，默认webpack5转换成'web'我认为它是现代浏览器适合的Bundle，所以更改了:
// webpack.config.js
module:{
rules:[
{
test:/\.js$/,
use:'babel-loader',
exclude:'/node_modules[\\\/]core-js/' // 注意此处
}
]
},
target:['web','es5']
意思就是让webpack根据我们的target最终打包的目标环境，这里多了个es5，意思打包成web和es5相互结合，具体看文档。最终打包后的包同时跑在google和Ie9上面了，嘻嘻嘻！
实验5(使用@babel/runtime-corejs3及babel-plugin-transform-runtime)
在查找上一个实验过程中，顺便也看到了另一种关于加载polyfill的方式，此时我们
npm uninstall @babel/runtime
npm install @babel/runtime-corejs3
// babel.config.json
{
"plugins": [
[
"@babel/plugin-transform-runtime",{
"corejs":{
"version":3,
"proposals": true
}
}
]
],
"presets": [
[
"@babel/preset-env",
{
// "useBuiltIns": "usage",
// "shippedProposals": true,
// "corejs": {
// "version": "3.19.0",
// "proposals": true
// },
"targets": {
"browsers": ["ie >= 9", "android >= 4", "ios >= 9", "and_uc >= 10"]
},
"modules": false
}
]
]
}
// webpack.config.js
module:{
rules:[
{
test:/\.js$/,
use:'babel-loader',
exclude:'/node_modules[\\\/]core-js/' // 注意此处
}
]
},
target:['web','es5']
// 结论
能同时跑起两个浏览器，但是我发现polyfill的包比实验4中的包大，因此更推荐上面的配置方式
最终完整配置（时刻关注babel和webpack官网最新细节，有时真很影响！！）
// package.json
npm i @babel-core @babel-cli @babel/plugin-transform-runtime @babel/preset-env babel-loader -D
npm i @babel/runtime core-js -S
// babel.config.json
{
"plugins": [
[
"@babel/plugin-transform-runtime"
]
],
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"shippedProposals": true,
"corejs": {
"version": "3.19.0",
"proposals": true
},
"targets": {
"browsers": ["ie >= 9", "android >= 4", "ios >= 9", "and_uc >= 10"]
},
"modules": false
}
]
]
}
其中的target可以分离出来到package.json或者.browserslistrc中或者babel-loader的options中
// webpack.config.js
module:{
rules:[
{
test:/\.js$/,
use:'babel-loader',
exclude:'/node_modules[\\\/]core-js/' // 注意此处
}
]
},
target:['web','es5']
扫一扫
2028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
