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。

这样，你就可以使用任何功能了。

总之，编译器：

允许我们写compile-to-JavaScript languages, like CoffeeScript, TypeScript, or ClojureScript;
让我们使用新的和潜在的js features
Contribute to the development of the ECMAScript specification.

Using Transpilers

比较流行的编译器是Babel

本章：

Comparing ES2015 source to transpiled output;
Setting up the Babel command-line interface (CLI); and
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:

Create a directory somewhere;
Initialize it as an NPM project;
Install the Babel tool, along with the presets and plugins we'll be using; and
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