Babel 是编译器（输入源码 => 编译后的）。就像其他编译器一样，编译过程分为三个阶段：解析、转换和打印。

现在，Babel 虽然开箱即用，但是什么动作都不做。它基本上类似于 const babel = code => code; ，将解析之后再同样的。如果想要 Babel 做一些实际的工作，就需要为其。

除了的，你还可以以 preset 的形式启用一组。

转换

这些用于转换你的。

转换将启用相应的语法，因此你不必同时指定这两种。

member-expression-literals

property-literals

reserved-words

property-mutators

arrow-functions

block-scoped-functions

block-

classes

computed-properties

destructuring

duplicate-keys

for-of

function-name

instanceof

literals

new-target

object-super

parameters

shorthand-properties

spread

sticky-regex

template-literals

typeof-symbol

unicode-regex

exponentiation-operator

async-to-generator

async-generator-functions

dotall-regex

named-s-regex

object-rest-spread

optional-catch-binding

unicode-property-regex

modules-amd

modules-commonjs

modules-syjs

modules-umd

class-properties

decorators

do-expressions

export-default-from

export-namespace-from

function-bind

function-sent

logical-assignment-operators

nullish-coalescing-operator

numeric-separator

optional-chaining

partial-application

pipeline-operator

private-methods

throw-expressions

查看我们  ！

这些都在 minify 仓库中。

inline-consecutive-adds

inline-environment-variables

member-expression-literals

merge-sibling-variables

minify-booleans

minify-builtins

minify-constant-folding

minify-dead-code-elimination

minify-flip-comparisons

minify-guarded-expressions

minify-infinity

minify-mangle-names

minify-numeric-literals

minify-replace

minify-simplify

minify-type-constructors

node-env-inline

property-literals

regexp-constructors

remove-console

remove-debugger

remove-undefined

simplify-comparison-operators

undefined-to-void

react-constant-elements

react-display-name

react-inline-elements

react-jsx

react-jsx-compat

react-jsx-self

react-jsx-source

external-helpers

flow-strip-types

jscript

object-assign

object-set-prototype-of-to-assign

proto-to-assign

regenerator

runtime

strict-mode

typescript

Babel语法

这些只允许 Babel 解析（parse） 特定类型的语法（而不是转换）。

注意：转换会启用语法。因此，如果你已经使用了相应的转换，则不需要指定语法。

或者，你也可以通过 Babel 解析器传递任何 plugins 参数 ：

Your .babelrc:

{
  "parserOpts": {
    "plugins": ["jsx", "flow"]
  }
}

Babel/Preset路径

如果再 npm 上，你可以输入的，babel 会检查它是否已经被安装到 node_modules 目录下

{
  "plugins": ["babel-plugin-myPlugin"]
}

你还可以指定的相对/。

{
  "plugins": ["./node_modules/asdf/plugin"]
}

如果的前缀为 babel-plugin-，你还可以使用它的短：

{
  "plugins": [
    "myPlugin",
    "babel-plugin-myPlugin" // 两个实际是同
  ]
}

这也适用于带有冠名（scope）的：

{
  "plugins": [
    "@org/babel-plugin-name",
    "@org/name" // 两个实际是同
  ]
}

Babel顺序

的排列顺序很重要。

这意味着如果两个转换都将处理“程序（Program）”的某个片段，则将根据转换或 preset 的排列顺序依次执行。

在 Presets 前运行。

顺序从前往后排列。

Preset 顺序是颠倒的（从后往前）。

例如：

{
  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

先执行 transform-decorators-legacy ，在执行 transform-class-properties。

重要的时，preset 的顺序是 颠倒的。如下设置：

{
  "presets": ["es2015", "react", "stage-2"]
}

将按如下顺序执行：stage-2、react 然后是 es2015。

这主要的是为了确保向后兼容，因为大多数将 "es2015" 排在 "stage-0" 之前。有关详细信息，请参阅 。

Babel参数

和 preset 都可以接受参数，参数由名和参数对象组成数组，可以在中设置。

如果不指定参数，下面这几种形式都是一样的：

{
  "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}

要指定参数，请传递以参数名作为键（key）的对象。

{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}

preset 的设置参数的工作原理完全相同：

{
  "presets": [
    [
      "env",
      {
        "loose": true,
        "modules": false
      }
    ]
  ]
}

Babel

请参考  学习如何创建自己的。

简单的用于反转顺序的（来自于）：

export default function() {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;
        // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name
          .split("")
          .reverse()
          .join("");
      },
    },
  };
}