从零开始认识Babel

Babel

Babel 是一个 JavaScript 编译器

Babel可以将我们写的es6+语法转换为浏览器兼容的语法，比如将箭头函数转换为普通函数。

Babel 的使用

• 单体文件
• 命令行
• 配合Webpack使用

配置文件
　　babel的配置文件有：（配置方法都一样）

　　　　　　.babelrc

　　　　　　babel.config.json

初次接触Babel我们需要用到以下两项配置

//.babelrc
{
  "presets": [...],
  "plugins": [...]
}

Plugins 插件

　　babel 本身不具有任何转化功能，我们要的代码要转换某些功能，比如将es6转换为es5，我们就需要下载相应的插件，并且将这些插件配置到.babelrc文件的plguins里面。

　　比如将箭头函数转换为浏览器能识别的普通函数
　　我们就需要用到 @babel/plugin-transform-arrow-functions 插件，并将其添加到配置文件
　　　　1.首先下载插件 

npm i @babel/plugin-transform-arrow-functions -D

　　　　2.添加至配置文件

//.babelrc
{
    "plugins":[
          "@babel/plugin-transform-arrow-functions"
        ]
}

这样，babel就能够将箭头函数转换为普通函数了

//转换前
var a = () => {};
//转换后
var a = function () {};

Presets 预设

可以被看作是一组 Babel 插件和/或 option 配置的可共享模块。

 当我门需要的插件很多，那么配置文件就会很长而且 install 的时间也会很长。babel 提供了一组插件的集合。使用 presets就不必重复定义 & 安装。

preset 分为以下几种：

　　官方内容，目前包括 env, react, flow, minify 等。

      env 的核心目的是通过配置得知目标环境的特点，然后只做必要的转换。

执行顺序

• Plugin 会运行在 Preset 之前。
• Plugin 会从前到后顺序执行。
• Preset 的顺序则从后向前。

 转载自：https://blog.csdn.net/weixin_45143481/article/details/111491299