Babel 所有 外掛Plugins，也就編碼轉換工具

monica888888發表於2017-07-28
BabelPlugin

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、 外掛按年分：

許多其它的團體維護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

ES5

ES2015

ES2016

ES2017

Modules

Experimental

Minification

Check out our minifier based on Babel!

These plugins are in the minify repo.

React

Other

Misc Plugins





相關文章