一、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 的了。