【前端工程化】babel到底是个什么，了解babel的功能

Babel 是一个 JavaScript 编译器(转换引擎)，将高版本语法转换成低版本语法的，以实现一套代码的兼容问题

Babel 是什么？ · Babel 中文网## Babel 是一个 JavaScript 编译器https://www.babeljs.cn/docs/index.htmlbabel转换js语法靠的是各种插件，单个插件的功能是单一的，一个插件负责转换一个语法，所以为了避免依次写出所有插件很麻烦，就把插件包装成为了一个预设preset，简言之，预设是插件的集合

牢记一个重要的概念

预设 presets

顾名思义，就是预先的设定

babel的预设（presets）可以被看作是一组babel插件或options配置的可共享模块，即插件的集合。

再牢记三个重要的包

@babel/preset-env

这是一个预设，就是里面有一些默认的配置，基本可以满足你的需求，他可以写在presets字段中

{
    presets: ['@babel/preset-env']
}

@babel/core

可以从这里面导入一些方法，实现babel的功能，就是手动调用babel的转化功能

通常来说我们在一个webpack或者vite构建的项目的中，我们是在配置文件中配置了，就会自动的按照配置文件转化，我们不知道到底转成什么样子了，@babel/core里面提供了一些方法，我们可以手动调用。

请看官网的这个例子，将一段字符串代码，使用babel.transform方法转化成ast语法树

@babel/core · Babel 中文网

虽然我们一般用不到，但是了解一些这个很有用处。

在线查看babel转译之后的代码

Babel 中文网 · Babel - 下一代 JavaScript 语法的编译器Babel - 下一代 JavaScript 语法的编译器https://www.babeljs.cn/repl随便转换一些import语法

 core-js

是javascript模块化标准库，是一个庞大的库，引入这个可以兼容低版本不支持的js语法，使用方法看官网，如果用到es6中的async await 就需要使用core-js来转换，只配置@babe/preset-env是转换不了了。

https://www.npmjs.com/package/core-jshttps://www.npmjs.com/package/core-js