Babel 所有 插件Plugins，也就编码转换工具

http://babeljs.io/docs/plugins/

我们看到了Packages(包), 它分为了三个，babel-core，babel-polyfill, Plugins，这些都是一个一个单独的包.

今天就讲第3个包Plugins（编码转换工具）。

一、Babel是一个编译器.

 At a high level, 在运行代码时有3个阶段：解析, 转换, 生成目标代码 (l像许多其它编译器一样).

 对一些 极好的/简单的 在编译器的向导, check out the-super-tiny-compiler, which also explains how Babel itself works on a high level.

现在, out of the box Babel 并不做任何事. 它基本上看起来像  const babel = code => code; 通过解析代码，然后返回来又产生同样的代码 ,j就是什么也没做。

你将需要为Babel 增加一些插件去做一些事情（他们影响第二阶段，转换）.

不知道从哪里开始? Check out some of our presets.

Presets：有两种，一个是按年份(babel-preset-2017)，一个是按阶段(babel-preset-stage-0)。

   不想组装你自己的插件集，没关系！.babelrc 配置里的Presets共享一组babel插件。

Official Presets

  我们已经为公共环境组装了一些。

二、插件分类

     每年的Presets只编译当年批准的内容。

  babel-preset-env 代替  es2015, es2016, es2017, latest。

 1、 插件按年分：

• env
• es2015
• es2016
• es2017
• latest (deprecated in favor of env)
• react
• flow

许多其它的团体维护presets在on npm是可利用的!

2、按阶段分

 经过多阶段Stage-X，(实验Presets)

在 in stage-x presets 的任何转换

任何转变在stage-x预设是语言变化，还没有被批准成为JavaScript发行版的一部分（such as ES6/ES2015）

“语言的变化是通过一个过程的方式来发展的，它为发展增加一个事物提供一个指导，从一个思想到全部具体的特征。

“Changes to the language are developed by way of a process which provides guidelines for evolving an addition from an idea to a fully specified feature”

可能改变

这些建议遭受改变，所以要格外小心使用。尤其是前三期，在每一个TC39会议后，如果可能，我们计划更新  stage-x presets 。

The TC39会议 把建议 分成 下面 几个阶段:

• Stage 0 - 想阶段: just an idea, possible Babel plugin.
• Stage 1 - 建议阶段: this is worth working on.
• Stage 2 - 草稿: initial spec.
• Stage 3 - 选的阶段: complete spec and initial browser implementations.
• Stage 4 - 完成: will be added to the next yearly release

三、转换Plugins

这些plugins 把transformations 应用到代码中。

Transform plugins将启动相应的语法plugin ，因此你必须指定两者。

  以 es2015-computed-properties为例：编译ES2015 computed properties 到ES5

  1、源码 varobj={

  ["x" + foo]: "heh",
  ["y" + bar]: "noo",
  foo: "foo",
  bar: "bar"
};

2、转换后的ES5,能在各种环境下使用。

var _obj;

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

var obj = (
  _obj = {},
  _defineProperty(_obj, "x" + foo, "heh"),
  _defineProperty(_obj, "y" + bar, "noo"),
  _defineProperty(_obj, "foo", "foo"),
  _defineProperty(_obj, "bar", "bar"),
  _obj
);

  3、安装插件

         npm install --save-dev babel-plugin-transform-es2015-computed-properties

 4、用插件，主要用在3个地方：

      1>  .babelrc

不带参数: {   "plugins": ["transform-es2015-computed-properties"] } 带参数: {   "plugins": [     ["transform-es2015-computed-properties", {       "loose": true     }]   ] }

      2>用在命令行， CLI

          babel --plugins transform-es2015-computed-properties script.js

      3>用在 Node API       

require("babel-core").transform("code", {   plugins: ["transform-es2015-computed-properties"]});

Options

loose boolean, 默认 false 像方法在类中赋值一样， in loose 模式, 使用简单的赋值计算属性名字，而不是去定义。 Example： 源码javascript var obj = {   ["x" + foo]: "heh",   ["y" + bar]: "noo",   foo: "foo",   bar: "bar" };转换后的javascript var _obj; var obj = (   _obj = {},   _obj["x" + foo] = "heh",   _obj["y" + bar] = "noo",   _obj.foo = "foo",   _obj.bar = "bar",   _obj );

四、下面是所有的转码插件：

ES3

• es3-member-expression-literals
• es3-property-literals

ES5

• es5-property-mutators

ES2015

• check-es2015-constants
• es2015-arrow-functions
• es2015-block-scoped-functions
• es2015-block-scoping
• es2015-classes
• es2015-computed-properties
• es2015-destructuring
• es2015-duplicate-keys
• es2015-for-of
• es2015-function-name
• es2015-literals
• es2015-object-super
• es2015-parameters
• es2015-shorthand-properties
• es2015-spread
• es2015-sticky-regex
• es2015-template-literals
• es2015-typeof-symbol
• es2015-unicode-regex

ES2016

• exponentiation-operator

ES2017

• async-to-generator

Modules

• es2015-modules-amd
• es2015-modules-commonjs
• es2015-modules-systemjs
• es2015-modules-umd

Experimental

• async-generator-functions
• async-to-module-method
• class-constructor-call (deprecated)
• class-properties
• decorators
• do-expressions
• export-extensions
• function-bind
• object-rest-spread

Minification

Check out our minifier based on Babel!

These plugins are in the minify repo.

• inline-environment-variables
• inline-consecutive-adds
• member-expression-literals
• merge-sibling-variables
• minify-booleans
• 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
• simplify-comparison-operators
• undefined-to-void

React

• react-constant-elements
• react-display-name
• react-inline-elements
• react-jsx
• react-jsx-compat
• react-jsx-self
• react-jsx-source

Other

• eval
• flow-comments
• flow-strip-types
• jscript
• object-assign
• object-set-prototype-of-to-assign
• proto-to-assign
• regenerator
• runtime
• strict-mode

Misc Plugins

• external-helpers
• undeclared-variables-check