JavaScript Transpilers: 为什么需要用它们？

时间：2019-01-06 22:28:52 阅读：513 评论：0 收藏：0 [点我收藏+]

标签：RoCE 翻译编程 str 初始化错误 types 理解 put

英文原文

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的转码。

官网的批量转码：

推荐的方式：

+   "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）都不会转码。