认识 .babelrc 房子中的小伙伴们在这个章节中，我们会了解项目中常见的 Babel plugins 和 prese

真理是认识事物的工具，是人们前进和上升的道路上的阶梯，真理都是从人类的劳动中产生的。 -- 高尔基

在这个章节中，我们会了解项目中常见的 Babel 配置有哪些以及它们分别有什么意义。

通常我们项目中会存在.babelrc文件，这个文件会告诉 Babel 如何转译我们的项目。Babel 配置的主要核心就是 presets 和 plugins。Babel 为了让自己的产品能够实现高度的自由化，所以默认的 presets 和 plugins 都是空的。

{
  plugins: [],
  presets: []
}

所以 plugins 和 presets 是开发者根据项目需要而自己配置的。那现在在学会配置这两个属性之前，我们所需要的是要了解 presets 和 plugins 是用来干嘛的。

1. 💃 伙伴们的自我介绍

一个 Babel 插件相当于我们平时开发的一个 javascript 项目工具包，只是这个工具包是专门针对 Babel 进行开发的。插件存在的意义是告诉 Babel 如何转译我们的代码。

在平时开发项目的过程中，我们通常只需要使用市面上已有的一些 Babel 插件就足够应付了。但是针对一些特定的需求，我们需要自定义插件来实现。关于如何开发自定义 Babel 插件，之后会有新的篇章会说明的。

presets 是 Babel 插件的预设，是一套插件功能的组合拳。

plugin 的有很多，就挑几个实用的说一下它们各自的功能和使用。@babel/plugin-proposal-class-properties、@babel/plugin-proposal-decorator。

@babel/plugin-proposal-class-properties 用于编译类的。可以通过如下方式使用：

{
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": false }]
  ]
}

定义 "loose" 主要用途是 loose 为 true 时使用赋值法去申明。loose 为 false 时是通过 Object.definePorperty 是申明。

@babel/plugin-proposal-decorator 用于在 JS 文件中使用装饰器。可以通过如下方式使用：

{
  "plugins": ["@babel/plugin-proposal-decorator"]
}

扩充 装饰器 使用方式如下：

@isTestable(true)
class MyClass {}  

function isTestable(value) {
  return function decorator(target) {
    target.isTestable = value;
  };
}

在项目中我们会用到一些预设插件，比如：@babel/preset-env、@babel/preset-react、@babel/preset-flow、@babel/preset-typescript，这几个插件使用来干什么的，接下来会一一说明。

@babel/preset-env 的功能是能够将新一代的 JS 语法转化为能够被当前环境所能识别的 JS 语法。可以通过如下方式使用：

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

@babel/preset-react 用于识别并转换 jsx 语法。可以通过如下方式使用：

{
  "presets": ["@babel/preset-react"]
}

@babel/preset-flow 用于做静态类型检查的。可以通过如下方式使用：

{
  "presets": ["@babel/preset-flow"]
}

@babel/preset-typescript 看名字我们大体就能够瞬间识别关键字 typescript，是的这个预设就是我们在项目中使用到 typescript 的时候，当前环境识别不了，可以通过添加这个预设来让 TS 语法被当前环境识别。可以通过如下方式使用：

{
  "presets": ["@babel/preset-typescript"]
}