react native学习之:转码器介绍

一) Babel转码器

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。

配置文件 .babelrc

Babel的配置文件是 .babelrc ，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。该文件用来设置转码规则和插件，基本格式如下。

{
"presets": [], "plugins": []
}

babel-node

工具自带一个命令，提供一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能，而且可以直接运行ES6代码。

babel-register

模块改写命令，为它加上一个钩子。此后，每当使用 require 加载、、和后缀名的文件，就会先用Babel进行转码。
需要注意的是， babel-register 只会对 require 命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转
码，所以只适合在开发环境使用。

babel-core

如果某些代码需要调用Babel的API进行转码，就要使用 babel-core 模块。

babel-polyfill

Babel默认只转换新的JavaScript句法(syntax)，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、 Symbol、Promise等全局对象，以及一些定义在全局对象上的方法(比如 Object.assign )都不会转码。
举例来说，ES6在对象上新增了 Array.from 方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用，为当前环境提供一个垫片。

浏览器环境

Babel也可以用于浏览器环境。但是，从Babel 6.0开始，不再直接提供浏览器版本，而是要用构建工具构建出来。如果你没有或不想使用构建工具，可以通过安装5.x版本的 babel-core 模块获取。

在线转换

Babel提供一个REPL在线编译器，可以在线将ES6代码转为ES5代码。转换后的代码，可以直接作为ES5代码插入网页运行。

与其他工具的配合

许多工具需要Babel进行前置转码，这里举两个例子:ESLint和Mocha。

二)Traceur转码器

Google公司的Traceur转码器，也可以将ES6代码转为ES5代码。

直接插入网页

Traceur允许将ES6代码直接插入网页。首先，必须在网页头部加载Traceur库文件。

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script> <script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script> <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script> <script type="module">
import './Greeter.js'; </script>

在线转换

Traceur也提供一个在线编译器，可以在线将ES6代码转为ES5代码。转换后的代码，可以直接作为ES5代码插入网页运行。上面的例子转为ES5代码运行，就是下面这个样子。

命令行转换

作为命令行工具使用时，Traceur是一个Node的模块，首先需要用Npm安装。

Node.js环境的用法

var traceur = require('traceur'); var fs = require('fs');
// 将ES6脚本转为字符串
var contents = fs.readFileSync('es6-file.js').toString();
var result = traceur.compile(contents, { filename: 'es6-file.js',
sourceMap: true,
// 其他设置
modules: 'commonjs' });
if (result.error) throw result.error;
// result对象的js属性就是转换后的ES5代码 fs.writeFileSync('out.js', result.js);
// sourceMap属性对应map文件 fs.writeFileSync('out.js.map', result.sourceMap);

作者开发经验总结的文章推荐,持续更新学习心得笔记

最后编辑于：2018.09.15 11:14:11