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

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

Babel 是什么? · Babel 中文网## Babel 是一个 JavaScript 编译器https://www.babeljs.cn/docs/index.html牢记一个重要的概念

预设 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语法

【前端工程化】babel到底是个什么,了解babel的功能_第1张图片

 core-js

是javascript模块化标准库,是一个庞大的库,引入这个可以兼容低版本不支持的js语法,使用方法看官网

https://www.npmjs.com/package/core-jsicon-default.png?t=M85Bhttps://www.npmjs.com/package/core-js

你可能感兴趣的:(前端工程化,前端,javascript,vue.js)