JS - Babel使用详解1（基本介绍、使用babel-standalone实现ES6在线转换）

2017-07-04 发布：hangge 阅读：11090

系列文章：
[当前文章] JS - Babel使用详解1（基本介绍、使用babel-standalone实现ES6在线转换）
JS - Babel使用详解2（使用babel-cli命令行进行ES6本地转码）
JS - Babel使用详解3（使用babel-polyfill实现对ES6新API的支持）

2015年6月， ES2015（即 ECMAScript 6、ES6）正式发布。虽然 ES6 提出了许多激动人心的新特性，但由于目前许多浏览器不支持或者支持不好，没有普遍地推广起来。

而 Babel 的出现，让我们可以现在就使用最新的 JavaScript 语法，而不用等待浏览器提供支持。

一、Babel介绍

1，功能介绍

Babel 是一个转换编译器，它能将 ES6 转换成可以在浏览器中运行的代码。Babel 可以处理 ES6 的所有新语法，并且内置了 React JSX 扩展及 Flow 类型注解支持。

Arrow functions
Async functions
Async generator functions
Block scoping
Block scoped functions
Classes
Class properties
Computed property names
Constants
Decorators
Default parameters
Destructuring
Do expressions
Exponentiation operator
For-of

Function bind
Generators
Modules
Module export extensions
New literals
Object rest/spread
Property method assignment
Property name shorthand
Rest parameters
Spread
Sticky regex
Template literals
Trailing function commas
Type annotations
Unicode regex

官网地址：http://babeljs.io/

2，在线体验

地址：http://babeljs.io/repl/

这里是一个在线的转换器（进行 ES6 到 ES5 的转换），我们可以直接看到转换代码的效果。比如下图，左侧代码使用了 ES6 的 let 和 const 这两个新特性，右侧会自动翻译成相应的 ES5 代码。

二、使用babel-standalone库实现在线转换

1，babel-standalone库介绍

GitHub主页：https://github.com/babel/babel-standalone

由于 Babel 本身的设计是基于 node.js 环境下运行使用的，而这个名为 babel-standalone 的开源项目，则支持非 node.js 环境下使用 Babel。
babel-standalone 已经包含了 Babel 所有的插件，其体积还是很大的（目前版本 6.24.2，未压缩的 js 文件 1.78MB，压缩了则为 765kb）。
使用这个类库，可以让我们实时在线转换 es6 为 js，同时支持 babel 提供的各种插件，而且最关键的是全特性支持，包括 amd 包裹，将 import 转换为 amd 的 require 等等。
注意：虽然实时转码很方便，但由于实时转码需要时间，性能上不及预先转换的方案，建议只在开发、学习中使用。生产环境中还是推荐使用命令行方式（后续文章会介绍）。

2，安装配置

（1）我们可以到其发布页上（点击跳转）将 babel.js 或 babel.min.js 下载下来，并在页面上引用。

<script src="babel.min.js"></script>

（2）也可以直接引用在线版的地址

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

3，测试样例

（1）这里我们还是使用 ES6 的 let 和 const 这两个新特性为例。注意：虽然我们的 ES6 脚本也是放在 script 标签之中，但是要注明 type="text/babel"

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      for (let i=0; i<5; i++) {
        console.log('sm')
      }
      console.log(i) // Error: i is not defined

      const fix = {}
      fix.some = 'sm'
      console.log(fix.some) // sm
    </script>
  </head>
  <body>
  </body>
</html>

（2）访问页面，可以看到 ES6 代码已经自动被转换成 ES5 的了。