babel 简记

Why babel

 为了在浏览器或node环境下使用尚未支持的ES特性。

常用组件

1. babel-cli:命令行工具
2. babel-register：require的钩子
3. 插件(preset):利用插件使用js语法新特性
4. Polyfill： preset只支持新语法，但不支持新特性，比如新增的原生方法，此时用Polyfill
5. babel-core :用代码调用babel功能时使用

使用

命令行转码babel-cli

Babel 提供babel-cli工具，用于命令行转码。
它的安装命令如下。
$ npm install babel-cli
命令行下运行babel命令,可对文件或整个目录转码

babel-node

babel-node命令提供repl环境。

babel-register

babel-register为require提供一个hook。会在执行require前 Babel先 转码

$ npm install --save-dev babel-register

先加载babel-register，后在加载文件

require("babel-register");
require("./youFile.js");

实时转码，只适合开发环境

babel-core

安装命令如下。

$ npm install babel-core --save

代码中就可以调用babel-core。

babel-polyfill

Babel 默认只转换新的 JavaScript 语法，而不转换新的 API，全局对象和全局对象上的方法。

安装命令如下。

$ npm install --save babel-polyfill

在脚本头部，加入如下一行代码。

import 'babel-polyfill';
// 或者
require('babel-polyfill');

浏览器环境

使用babel-standalone模块提供的浏览器版本，将其插入网页。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script type="text/babel">
// es6 code
</script>

有些工具需要先运行babel转码

jasmine，webpack等，查看相应工具的文档

参考

1. babel官网
2. 阮一峰的《ECMAScript 6 入门》
3. 《ECMAScript 6 入门》-ECMAScript 6 简介-Babel 转码器

·