煦涵說Babel

Babel，下一代javascript編譯器，當前版本 v2.4.0 ，它能夠處理ES6的全部新語法，並內置了React JSX擴展及Flow類型註解支持，若是對Flow不是很瞭解能夠查看FED實驗室微信公衆號文章煦涵說Flow。

Babel與JavaScript技術委員會（TC39）始終保持着高度一致，可以在ECMAScript新特性標準化以前爲開發者提供現實可用的轉碼編譯實現，以在ECMAScript規範最後定稿前得到來自世界各地開發者更多的反饋，從而間接推進了javascript的發展以及開發者在項目中嘗試使用新技術。所以建議你們開始使用 Babel。

Babel 配置文件 .babelrc

學習和使用Babel的第一步，配置 .babelrc 文件，該文件存放到項目根目錄下，用來設置 Babel 的轉碼規則和插件。基本格式以下：

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

presets的規則集以下：

# replaces es2015, es2016, es2017, latest
$ yarn add babel-preset-env --dev

# es2015
$ yarn add babel-preset-es2015 --dev

# es2016
$ yarn add babel-preset-es2016 --dev

# es2017 
$ yarn add babel-preset-es2017 --dev

# react
$ yarn add babel-preset-react --dev

# flow
$ yarn add babel-preset-flow --dev

# The TC39 categorizes proposals into the following stages:
# 
# Stage 0 - Strawman: just an idea, possible Babel plugin.
# Stage 1 - Proposal: this is worth working on.
# Stage 2 - Draft: initial spec.
# Stage 3 - Candidate: complete spec and initial browser implementations.
# Stage 4 - Finished: will be added to the next yearly release.
# For more information, be sure to check out the current TC39 proposals and its process document.
# 
# The TC39 stage process is also explained in detail across a few posts by Yehuda Katz (@wycatz) over at thefeedbackloop.xyz: # Stage 0 and 1, Stage 2, Stage 3, and Stage 4 coming soon.

$ yarn add babel-preset-stage-x --dev

plugins插件集合不少。

新建一個配置文件 .babelrc，並增長以下代碼，以供咱們下面調試使用:

# 新建配置文件.babelrc，並添加以下內容
# {
#   "presets": ["es2015"],
#   "plugins": []
# }
$ touch .babelrc
# 安裝 babel-preset-es2015
$ yarn add babel-preset-es2015 --dev

安裝和使用 Babel

ps: 本文將使用Yarn來安裝依賴相關npm包，若是不瞭解Yarn的歡迎閱讀公衆號專欄 煦涵說Yarn。

命令行方式運行 babel-cli

babel-cli 的 CLI 是一種在命令行下使用 Babel 編譯文件的簡單方法。

全局安裝

# 全局安裝
$ yarn global add babel-cli

新建一個source.js文件，內容以下：

var arr = [1, 2, 3, 4];

arr = arr.map((item, index) => {
    return item * index;
});

console.log(arr);

# 輸出結果到控制檯
$ babel source.js

# 輸出結果到文件
$ babel source.js --out-file dist.js
or 
$ babel source.js -o dist.js

# 輸出結果到目錄
$ babel /src --out-dir /dist
or 
$ babel /src -d /dist

項目內安裝(局部安裝)

# 初始化一個項目package.json
$ mkdir first-babel-proj
$ cd first-babel-proj
$ yarn init 
$ yarn add babel-cli --dev

修改package.json，添加以下文本

{
  "name": "babel-proj",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.24.1"
  },
+  "scripts": {
+   "build": "babel src -d dist"
+  }
}

運行

$ yarn run build

require方式運行 babel-register

ps: 這種方法並不適合正式產品環境使用。 在部署到生成環境以前預先編譯會更好。 不過用在構建腳本或是其餘本地運行的腳本中是很是合適的。

$ yarn add babel-register --dev

新建compile.js文件

require('babel-register');
require('./src/source.js');

運行

node compile.js

運行結果

$ [0, 2, 6, 12]

編程方式運行 babel-core

$ yarn add babel-core --dev

字符串形式的 JavaScript 代碼能夠直接使用 babel.transform 來編譯。

babel.transform("code();", options);
// => { code, map, ast }

若是是文件的話，能夠使用異步 api：

babel.transformFile("filename.js", options, function(err, result) {
  result; // => { code, map, ast }
});

或者是同步 api：

babel.transformFileSync("filename.js", options);
// => { code, map, ast }

要是已經有一個 Babel AST（抽象語法樹）了就能夠直接從 AST 進行轉換。

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

更多選項 options.

Babel 與 Webpack

使用 babel-loader 插件

$ yarn add bable-loader --dev

webpack.config.js 配置文件增長以下規則：

{
    test: /\.js$/,
    loader: 'babel-loader'
}

Babel 低版本瀏覽器兼容

可參考:

• 煦涵說webpack-IE低版本兼容指南，或者FED實驗室公衆號文章
• React - IE低版本兼容

感謝您的閱讀

--eof--

做者[煦涵]
2017年06月03日

下面是「FED實驗室」的微信公衆號二維碼，歡迎長按、掃描關注：