了解babel的作用、原理、基本使用，为什么有babel，以及在webpack中的babel-loader

2025-03-03

2160 字约 8 分钟

...

一、为什么有babel？

babel是一个工具链，如今大多数的浏览器都支持es6+的语法和特性，但难免有些旧版本的浏览器是不支持的，为了兼容这些旧版本的浏览器，有了babel这一个 JavaScript 编译器。它能为我们做一些事情：对更高级的语法进行转换，引入第三方 polyfill 模块，对旧版本浏览器不支持的特性打补丁（补充缺失的功能）。

二、基本使用

1.命令行使用

安装以下包：

npm install @babel/cli @babel/core

运行此命令将 src 目录下的所有代码编译到 dist目录：

./node_modules/.bin/babel src --out-dir dist

也可以利用 npm@5.2.0 所自带的 npm 包运行器将 ./node_modules/.bin/babel 命令缩短为 npx babel

npx babel src --out-dir dist

babel将src目录下的文件都进行转换，并将转换后的代码输出到dist文件夹中。但这时候其实转换前和转换后的代码并无区别。原因是我们没有声明对指定的代码进行怎么样的转换，所以需要用到插件。

2.插件的使用

插件是小型的 JavaScript 程序，用于指导 Babel 如何对代码进行转换。例如我们需要将ES6+的代码转为ES5的，那么需要用到@babel/plugin-transform-arrow-functions插件

npm install --save-dev @babel/plugin-transform-arrow-functionsnpx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping

转换前和转换后的效果：

const fnc = () => console.log('箭头函数')var fnc = function fnc() {

3.预设preset的使用

对于上面的语法转换，我们要针对指定代码进行转换，可能需要用到多个插件，如果转换的过多，需要一个个添加，无疑是非常麻烦的。针对这一弊端我们可以使用预设（即一组预先设定的插件）

对于上面的例子，我们只需安装@babel/preset-env包，就可以实现代码转换

npm install @babel/preset-env -Dnpx babel src --out-dir dist --presets=@babel/preset-env

4.Babel的配置文件

我们可以将babel的配置信息放到一个独立的文件中，有两种编写方式：

babel.config.json（或者.js，.cjs，.mjs）文件；
.babelrc.json（或者.babelrc，.js，.cjs，.mjs）文件；

这两种方式的区别：

.babelrc.json：早期使用较多的配置方式，但是对于配置Monorepos项目是比较麻烦的；
babel . config .j son（babel 7 ）：可以直接作用于Monorepos项目的子包，更加推荐；

targets: "last 2 version"

5.polyfill的使用

如果我们使用了ES6的一些语法特性（例如Promise, Generator, Symbol），但是这些特性是新增的，我们可以使用polyfill来填充或者说打一个补丁，那么就会包含该特性了。

官网的一段描述， Babel 7.4.0 版本以上的我们使用@babel/core或@babel/plugin-transform-regenerator包，不再使用@babel/polyfill包。

babel7.4.0之后，可以通过单独引入core-js和regenerator-runtime来完成polyfill的使用

npm install core-js regenerator-runtime --save

我们需要在babel.config.js文件中进行配置，给preset-env配置一些属性：

配置之前，我们需要安装@babel/runtime-corejs3

npm install --save @babel/runtime-corejs3

useBuiltIns:设置以什么样的方式来使用polyfill,该属性有三个常见值

false: 打包后的文件不使用polyfill来进行适配，且这个时候是不需要设置corejs属性的.
usage：会根据源代码中出现的语言特性，自动检测所需要的polyfill，这样可以确保最终包里的polyfill数量的最小化，打包的包相对会小一些，可以设置corejs属性来确定使用的corejs的版本。
entry：如果我们依赖的某一个库本身使用了某些polyfill的特性，但是因为我们使用的是usage，所以之后用户浏览器可能会报错，如果担心这类问题，我们可以使用entry，这样做会根据browserslist目标导入所有的polyfill，但是对应的包也会变大。注意，我们需要在入口文件中导入两个包