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库文件。

在线转换

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);

---

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

五星推荐 Runtime 10种用法（没有比这更全的了）
五星推荐 成为iOS顶尖高手，你必须来这里(这里有最好的开源项目和文章)
五星推荐 iOS逆向Reveal查看任意app 的界面
五星推荐手把手教你使用python自动打包上传应用分发
JSPatch （实时修复App Store bug）学习(一)
iOS 高级工程师是怎么进阶的(补充版20+点)
扩大按钮(UIButton)点击范围(随意方向扩展哦)
最简单的免证书真机调试(原创)
通过分析微信app,学学如何使用@2x,@3x图片
TableView之MVVM与MVC之对比
使用MVVM减少控制器代码实战(减少56%)
ReactiveCocoa添加cocoapods 配置图文教程及坑总结