Babel 組成部分

@babel/core  *必裝

babel 核心包，編譯器。提供轉換的API

@babel/cli 

babel的命令列工具，通過命令列對js程式碼進行轉譯

具體命令使用：https://babeljs.io/docs/en/babel-cli 

啟動babel/cli 編譯器  /node_modules/.bin/babel 非全域性安裝

將src 目錄下的所有js 檔案編譯成並且輸出到 lib 目錄下 

 ./node_modules/.bin/babel src --out-dir lib

要在每次更改檔案時編譯檔案，請使用--watch或-w選項：

 ./node_modules/.bin/babel --watch --out-file script-compiled.js

@babel/polyfill

注意babel7 中 @babel/polyfill  是 @babel/runtime-corejs2的別名

詳細地址：https://babeljs.io/docs/en/v7-migration

babel 7 中說明刪除提案polyfill @babel/polyfill 結合 @babel/runtime-corejs2 + @babel/plugin-transform-runtime

babel 編譯時只轉換語法，幾乎可以編譯所有時新的 JavaScript 語法，但並不會轉化BOM裡面不相容的API
比如 Promise,Set,Symbol,Array.from,async 等等的一些API
這時候就需要 polyfill 來轉轉化這些API 進行轉譯 *是通過向全域性物件和內建物件的prototype上新增方法實現的，會造成全域性變數汙染，結合@babel/plugin-transform-runtime 可避免全域性汙染，使用方式檢視下文

//.babelrc
{
    "plugins": [
        ["@babel/plugin-transform-runtime",{"corejs": 2}]
    ]
  }
 

@babel/register

使用Babel的方法之一是通過require鉤子。require鉤子將自己繫結到節點require並自動編譯檔案。

在node中 使用@babel/register 讓其在require 載入檔案的時候babel 自動動態編譯

require("@babel/register");
require("./test.js")

Presets

如 env,stage-0,stage-1等等
其中的 env 表示 babel會載入 es6 相關的編譯模組，然後 stage-0 表示的是什麼呢？
stage 系列集合了一些對 es7 的草案支援的外掛，由於是草案，所以作為外掛的形式提供。

以下下官方給我們提供的自帶的presets:

babel 無法編譯的ES5新語法 詳情請移致：https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/definitions.js

@babel/preset-env *必裝

包含如下標準：

@babel/preset-es2015，@babel/preset-es2016和@babel/preset-es2017

ES3
member-expression-literals
property-literals
reserved-words
ES5
property-mutators
ES2015
arrow-functions
block-scoped-functions
block-scoping
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
ES2016
exponentiation-operator
ES2017
async-to-generator

@babel/preset-stage-0

@babel/preset-stage-1

@babel/preset-stage-2 //如開啟預設器 需安裝下列所示外掛

@babel/preset-stage-3

這幾個階段中對應的方法級： Babel 7官方中 推薦：截至Babel v7，所有階段預設均已棄用

{
  "plugins": [
    // Stage 0
    "@babel/plugin-proposal-function-bind",

    // Stage 1
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
    ["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
    "@babel/plugin-proposal-do-expressions",

    // Stage 2
    ["@babel/plugin-proposal-decorators", { "legacy": true }], //解析裝飾器
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",

    // Stage 3
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
    "@babel/plugin-proposal-json-strings"
  ]
}

plugins

轉換以外掛的形式出現，外掛是小型JavaScript程式，它指示Babel如何對程式碼進行轉換。 

 @babel/plugin-transform-runtime  *必裝

所有幫助程式都將引用該模組，@babel/runtime以避免編譯輸出中的重複。執行時將編譯到您的構建中。它會將重複的已require 模組方式引入。

/***
    未使用 @babel/plugin-transform-runtime
**/
"use strict";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

_extends({}, {
  name: "abc"
});

/***
    已使用 @babel/plugin-transform-runtime
**/

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

(0, _extends2.default)({}, {
  name: "abc"
});

@babel/runtime-corejs2 編譯自帶ES5語法

如Object.assign 等 根老版本庫@babel/polyfill 類似。一般配合@babel/plugin-transform-runtime 使用.詳細配置使用見 .babelrc 檔案

# install the runtime as a dependency
npm install @babel/runtime-corejs2
# install the plugin as a devDependency
npm install @babel/plugin-transform-runtime --save-dev

@babel/plugin-transform-object-assign

用來編譯 Object.assign

@babel/plugin-proposal-class-properties  解析類的屬性

class Bork {
    //Property initializer syntax
    instanceProperty = "bork";
    boundFunction = () => {
      return this.instanceProperty;
    };

    //Static class properties
    static staticProperty = "babelIsCool";
    static staticFunction = function() {
      return Bork.staticProperty;
    };
  }

  let myBork = new Bork;

  //Property initializers are not on the prototype.
  console.log(myBork.__proto__.boundFunction); // > undefined

  //Bound functions are bound to the class instance.
  console.log(myBork.boundFunction.call(undefined)); // > "bork"

  //Static function exists on the class.
  console.log(Bork.staticFunction()); // > "babelIsCool"

@babel/plugin-proposal-decorators 裝飾器

@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}

配置檔案.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/plugin-transform-runtime",{"corejs": 2}],
        "@babel/plugin-transform-object-assign",
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        "@babel/plugin-proposal-class-properties"
    ]
  }

package.json

{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/runtime-corejs2": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "@babel/plugin-transform-object-assign": "^7.0.0"
  },
  "dependencies": {
    
  }
}