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

Posted 2021-02-01 Mr-chen

英文原文

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

 

官网的批量转码：

推荐的方式：

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

项目根目录下，需要建立src和lib目录。（其他目录也可，对应着改）。

然后输入 

~/babel_1 ? npm run build

> [email protected] 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