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