認識下babel

在這一次整理babel以前，我對babel很混亂，由於他有好多lib.
如：babel_core,babel_2015,babel_cli,babel,babel_transform等

1. .babelrc

帶rc的都是預處理的，如.eslintrc。.babelrc的基本結構以下：

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

presets，預處理器定義babel要處理哪些？經常使用的有babel-preset-es2015,babel-preset-react等。

安裝操做以下：

# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015

# react轉碼規則
$ npm install --save-dev babel-preset-react

# ES7不一樣階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

而後，將這些規則加入.babelrc。

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

plugins是babel的插件，經常使用的有babel-plugin-transform-runtime等。

而在roadhog中有以下配置：

extraBabelPlugins: [
    'transform-runtime',
    ['import', { 'libraryName': 'antd', 'style': true }]
  ],

裏面的兩個插件babel-plugin-transform-runtime和babel-plugin-import.
安裝以下：

# es6的開發版墊片(新api的補全)
$ npm install --save-dev babel-plugin-transform-runtime

# 動態導入
$ npm install --save-dev babel-plugin-import

生產環境的es6墊片是babel-runtime，還能夠直接引入babel-polyfill。

2. babel_cli

Babel提供babel-cli工具，用於命令行轉碼。

相似這樣：

# 轉碼結果輸出到標準輸出
$ babel example.js

# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 參數生成source map文件
$ babel src -d lib -s

通常會在項目的package.json中添加它

$ npm install --save-dev babel-cli

3. babel-node

node8.5加入了對es6的支持，但我仍是用的node6.9，習慣了用es6去寫js，怎麼讓node支持es6呢？

babel-cli中有一個babel_node工具，直接使用就能夠

$ babel-node
> (x => x * 2)(1)
2

也能夠

$ babel-node es6.js
2

只須要安裝babel-cli，而後babel-node es6.js便可。

4. babel-core

若是某些代碼須要調用Babel的API進行轉碼，就要使用babel-core模塊。

代碼中直接使用:

var babel = require('babel-core');

// 字符串轉碼
babel.transform('code();', options);
// => { code, map, ast }

// 文件轉碼（異步）
babel.transformFile('filename.js', options, function(err, result) {
  result; // => { code, map, ast }
});

// 文件轉碼（同步）
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

// Babel AST轉碼
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

5. 其餘

babel-cli的依賴

"dependencies": {
    "babel-core": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-register": "^6.26.0",
    "babel-runtime": "^6.26.0",
    "chokidar": "^1.6.1",
    "commander": "^2.11.0",
    "convert-source-map": "^1.5.0",
    "fs-readdir-recursive": "^1.0.0",
    "glob": "^7.1.2",
    "lodash": "^4.17.4",
    "output-file-sync": "^1.1.2",
    "path-is-absolute": "^1.0.1",
    "slash": "^1.0.0",
    "source-map": "^0.5.6",
    "v8flags": "^2.1.1"
  }

babel-preset-es2015的依賴

"dependencies": {
    "babel-plugin-check-es2015-constants": "^6.22.0",
    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
    "babel-plugin-transform-es2015-block-scoped-functions": "^6.22.0",
    "babel-plugin-transform-es2015-block-scoping": "^6.24.1",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-plugin-transform-es2015-computed-properties": "^6.24.1",
    "babel-plugin-transform-es2015-destructuring": "^6.22.0",
    "babel-plugin-transform-es2015-duplicate-keys": "^6.24.1",
    "babel-plugin-transform-es2015-for-of": "^6.22.0",
    "babel-plugin-transform-es2015-function-name": "^6.24.1",
    "babel-plugin-transform-es2015-literals": "^6.22.0",
    "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
    "babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
    "babel-plugin-transform-es2015-object-super": "^6.24.1",
    "babel-plugin-transform-es2015-parameters": "^6.24.1",
    "babel-plugin-transform-es2015-shorthand-properties": "^6.24.1",
    "babel-plugin-transform-es2015-spread": "^6.22.0",
    "babel-plugin-transform-es2015-sticky-regex": "^6.24.1",
    "babel-plugin-transform-es2015-template-literals": "^6.22.0",
    "babel-plugin-transform-es2015-typeof-symbol": "^6.22.0",
    "babel-plugin-transform-es2015-unicode-regex": "^6.24.1",
    "babel-plugin-transform-regenerator": "^6.24.1"
  }

6. 參考文章

Babel 入門教程