英文原文

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更极端，增加了  to a .

"use strict";// TypeScript -- JavaScript, with types and stufffunction 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, 让旧浏览器也支持。

 

不同的语言开发，有不同的偏好。如 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.

 

比较流行的编译器是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.

 

使用 . 在左边窗口写一些包含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 initnpm 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关键字。

 

备注：原文再往下就说的很模糊。所以网上找了几篇文章，尝试多次，解决。下面是经验总结。

 （讲解最清楚。）

 

首先，再项目文件夹根目录下，创建.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 buildsrc/index.js -> build/index.js

 

注意⚠️windows下的使用有区别，具体见 

---

 

 

使用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