Babel入门指南

圣经中说 , 人类最早的时候都住在同一个地方 , 讲同一种语言 , 他们决定造一座通天的塔 , 所有的人住在里面 , 人类再也不会分散
上帝不同意 , 他让人类讲不同的语言 , 从此难于沟通
人类自此各散东西 , 计划因此失败

在希伯来语当中 , "巴别"就是"变乱"的意思 , 于是就称这座塔为巴别塔 (Tower of Babel)

---

有些时候我们想要在JS代码当中使用ES6甚至是还未正式发布的ES7当中的语法
因为这些语法简洁清晰 , 能够使代码可读性更强
但是如果这些代码应用在浏览器当中 , 或者是nodejs的环境当中 , 有些是不支持的
于是我们就需要把新语法写的代码通过预处理工具进行转化
这就是Babel的作用

Babel是一个广泛使用的转码器 , 可以将ES6的代码转为ES5的代码 , 从而在现有的环境中执行

编写配置文件

Babel的执行需要一个配置文件 , 为他指定转码的规则 , 或者加载一些插件等
这个文件默认为.babelrc , 放在项目的根目录下

{
	"presets": [
		"es2015",
		"stage-2"
	],
	"plugins": []
}

presets当中指定的是转码规则 , 这里我们添加一个es2015和stage-2

es2015当然就是可以对ES6的语法进行转化 , 将其转化为ES5的语法
stage-2是可以去使用未正式发布的ES7的一些语法 , 这个分为几个级别 , 在最后再作补充说明

命令行转码babel-cli

babel提供了一个命令行转码的工具 , 可以通过执行babel命令 , 并传入相关的参数 , 对文件内容进行转码

npm install babel-cli --save-dev

这里如果我们不执行全局安装 , 就需要将对应的命令配置到npm的脚本当中

"scripts": {
  "build" : "babel src -d dist",
  "test" : "babel test.js"
}

这样我们通过npm run 脚本名称就可以直接执行对应的命令了

babel命令的基本用法

#转码结果到标准输出
babel example.js

#将转码的结果写入到指定的文件
babel example.js -o compiled.js

#将整个目录当中的所有文件进行转码到目标目录
babel src -d dist

# -s参数生成source map文件
babel src -d dist -s

比如我们现在在src当中编写下面两个文件 , 运用一些ES6的新语法

module1.js

const content = "我是模块当中的内容";
export {content};

index.js

import {content} from "./module1";

const obj = {
	str : content,
	func : () => console.log(obj.str)
}
obj.func();

其中的箭头函数和import export的模块化语法 , 都是ES6新加入的内容 , 有部分浏览器已经支持箭头函数的语法了 , 并且在nodejs环境中直接执行也没问题
但是export和import的形式 , 都还不支持

现在执行npm run build进行转码
之后可以看到在dist目录下 , 有两个转码完成的文件
module1.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var content = "我是模块当中的内容";
exports.content = content;

index.js

"use strict";

var _module = require("./module1");
var obj = {
	str: _module.content,
	func: function func() {
		return console.log(obj.str);
	}
};
obj.func();

可以看到import已经被转化为了commonJS的require的方式 , 用来引入其他的模块
箭头函数也被转化为了普通的函数定义形式

babel-node

安装nodejs之后 , 在控制台直接执行node可以进入一个交互式解释器的环境
也就是输入任何语句 , 都可以直接执行得到结果
通常称之为REPL
当然这种方式使用的解释器 , 与直接用node example.js执行一个写好的JS文件 , 是一样的

babel提供了一种可以直接支持ES6的REPL环境
执行babel-node即可进入

它不需要单独安装 , 是随babel-cli一起安装的

当然 , 与node命令一样 , 我们也可以通过babel-node example.js来以ES6的模式运行一个JS脚本 , 从而可以不必转码生成目标文件再去运行

babel-register

这个模块可以改写require函数 , 为他加上一个钩子 , 也就是在引入的时候完成这个转码的过程
首先当然是安装

npm install babel-register --save-dev

在使用当中 , 必须首先加载babel-register这个模块

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

这种方式只能够对使用require加载的文件进行转码 , 而不能作用于当前文件
所以如果当前文件中存在解释器不能直接识别的语法 , 还是会出问题的

babel-core

这个模块提供了babel的一些API , 可以供我们在代码中执行调用

import * as babel from "babel-core";

const result = babel.transform("()=>console.log(1)", 
		{presets : ["es2015","stage-2"]});
console.log(result.code);
/**
"use strict";

(function () {
  return console.log(1);
});
 */

这里是执行了直接对一个字符串的转码操作
返回的结果是一个对象 , 包含code map ast
其中的code就是转换之后的代码

文件转码API

import * as babel from "babel-core";

babel.transformFile("./src/module1.js", 
	{presets : ["es2015","stage-2"]},
	(err, result) => {
		if(err) {
			console.error(err);
			return;
		}
		console.log(result.code);
		console.log(result.map);
		console.log(result.ast);
	});

显然这是一个异步操作 , 第一个参数是文件名 , 第二个参数是转码的配置项
第三个参数是转换完成之后的回调函数
( 当然上面的代码需要通过babel-node去执行 , 或者也可以采用require函数去引入模块 )

当然也存在同步执行转换的方法

const result = babel.transformFileSync('./src/module1.js', 
{presets : ["es2015","stage-2"]});

注意 :
babel本身只能转换ES6新增的语法 , 但是无法直接处理新的API
比如在Array对象上面新增的from方法
不会执行任何处理 , 转换之后还是调用这个方法
如果需要进行处理 , 需要使用babel-polyfill模块
在脚本当中引入这个模块即可

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

与webpack的配合

babel-loader是一个适用于webpack打包的项目的一个加载器
用于对项目中的JS文件进行预处理操作

需要安装babel-loader , babel-core , babel-preset-es2015模块
( babel-preset 有很多可选 , 根据具体需要而定 )
然后在webpack.config.js当中配置babel加载器

loaders: [
	{ test: /\.js$/, loader : "babel-loader"}
	// 其他loader配置...
]