JavaScript Transpilers: 爲何須要用它們？Babel的使用介紹。

英文原文

https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them

 

摘譯（文章內的代碼有些過時，部分改動）：

 

Transpilers, or source-to-source compilers，讀取用一個編程語言寫的源代碼，而後產生相等的另外一個語言。

你寫的語言被翻譯成JavaScript，被稱爲compile-to-JS語言。

 

你可能據說過CoffeeScript或者TypeScrip這類語言。

CoffeeScript會提供語法糖，非原生JavaScript。

TypeScript更極端，增長了 classical object-oriented semantics to a fundamentally different language.

"use strict";

// TypeScript -- JavaScript, with types and stuff
function printSecret ( secret : string ) {
    console.log("${secret}. But don't tell anyone.");
}

printSecret("I don't like CoffeeScript.");

 

問題是JavaScript環境只理解原生js。你不能在控制檯寫那兩種代碼，會報告❌。

甚至在就瀏覽器，你寫一些純js 代碼，仍會報告❌。好比, Template literals就不支持舊瀏覽器。

 

所以， transpiler來了，它讀取Coffeescript, TypeScript, ES2015, 轉化爲plain js, 讓舊瀏覽器也支持。

 

In Defense of Transpilers

不一樣的語言開發，有不一樣的偏好。如 Pythonistas like CoffeeScript. 

但你可能只喜歡plain js。

 

不一樣的瀏覽器使用不一樣的js engine。所以使用編譯器把你用ES6寫的代碼轉化爲全部瀏覽器都支持的ES5。

這樣，你就可使用任何功能了。

 

總之，編譯器：

1. 容許咱們寫compile-to-JavaScript languages, like CoffeeScript, TypeScript, or ClojureScript;
2. 讓咱們使用新的和潛在的js features
3. Contribute to the development of the ECMAScript specification.

 

Using Transpilers

比較流行的編譯器是Babel

本章：

1. Comparing ES2015 source to transpiled output;
2. Setting up the Babel command-line interface (CLI); and
3. A look at how build toolks like Webpack, JSPM, and Babelify streamline the process.

 

使用 Babel's live transpiler. 在左邊窗口寫一些包含ES6功能的代碼，而後會轉化爲ES5的代碼。

 

Setting Up the Babel CLI

To get started:

1. Create a directory somewhere;
2. Initialize it as an NPM project;
3. Install the Babel tool, along with the presets and plugins we'll be using; and
4. Configure Babel to use those presets and plugins.

cd && mkdir babel_example &&  cd babel_example

//Node默認的模塊管理器，用來按照和管理Node模塊。
//初始化,生成一個新的package.json文件
npm init

npm install --save-dev babel-cli babel-preset-es2015 babel-plugin-transform-async-to-generator  

 

安裝Babel CLI,

安裝babel-preset-es2015，一組插件集合，用於支持全部的ES2015功能。

安裝babel-plugin-transform-async-to-generator， 可使用ES7的功能Async await關鍵字。

 

備註：原文再往下就說的很模糊。因此網上找了幾篇文章，嘗試屢次，解決。下面是經驗總結。

使用Babel cli詳解 （講解最清楚。）

阮一峯的入門教程

 

首先，再項目文件夾根目錄下，建立.babelrc。添加：

//根據須要添加插件和預設的規則集。
{
    "presets": ["es2015"],
    "plugins": ["transform-async-to-generator"]
}

 

而後，建立一個index.js文件，寫一些ES6代碼。

最後， npm run babel， 可是報告❌。

npm ERR! missing script: babel

 

這是由於非全局安裝，因此報告錯誤。

修改package.json文件：

//添加腳本：
   "scripts": {
     "babel": "babel"
   },

而後再運行， npm run babel，會再屏幕輸出index.js的轉碼。

 

一樣，若是想要使用babel-node命令（提供支持ES6的repl環境。能夠直接運行全部的ES6代碼），

//添加腳本,會調用文件babel-node, 執行相關腳本。
   "scripts": {
     "babel-node": "babel-node"
   },

 

而後npm run babel-node

> babel_1@1.0.0 babel /Users/chentianwei/babel_1
> babel-node

>  (x => x * 2)(1)
2

 

 

官網的批量轉碼：

推薦的方式：

+   "scripts": {
+     "build": "babel src -d build"

項目根目錄下，須要創建src和lib目錄。（其餘目錄也可，對應着改）。

而後輸入 

~/babel_1 ⮀ npm run build

> babel_1@1.0.0 build /Users/chentianwei/babel_1
> babel src -d build

src/index.js -> build/index.js

 

注意⚠️windows下的使用有區別，具體見使用Babel cli詳解 

---

 

 

使用babel-polyfill實現對ES6新API的支持

Babel 默認只轉碼 ES6 的新語法（syntax），而不轉換新的 API，好比 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（好比 Object.assign、Array.from）都不會轉碼。

若是想讓這些方法運行，必須使用  babel-polyfill，爲當前環境提供一個墊片。

 

安裝：

npm install --save-dev babel-polyfill

 

原文：http://www.hangge.com/blog/cache/detail_1691.html