Babel 入门学习笔记

前言

跟着公司项目进行了好几个月的时间了。一直没仔细的过一遍项目中所用到的东西。由此先从babel、webpack、mocha等内容入手。简单记录学习笔记。

JavaScript 的 ES6/7规范中新特性的加入（比如箭头函数、async/await等），可以让开发者书写更优雅、简洁的代码。但是由于各大浏览器并未全面实现最新的ECMAScript规范。为了更好的兼容性，想要使用这些新特性就必须将ES6/7代码转换为ES5代码供浏览器运行。

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

// 转码前
[1,2,3].map(item => item + 1)

// 转码后
[1,2,3].map(function (item) {
  return item + 1
})

第一次接触babel是和 webpack 一起使用。babel-loader 作为webpack 的 loader使用。一股脑把webpack、babel、mocha 这些东西都扔过来，还真的容易混淆。

其实babel单独使用的时候，配置还是比较清晰易懂的。

配置文件.babelrc

此文件存储在项目根目录下，用于设置转码规则和一些转码要用的插件。使用babel必需要配置这个文件。基本格式如下（看起来好简单）：

{
  "presets": [],
  "plugins": []
}

plugins 字段为：你想使用的转换规则插件 （此处查看）

presets 字段为：预设规则集 （不想自己单独配置各个plugins时，或没有特殊plugin需求，可直接使用预设规则集）

presets 分为官方维护的规则集和npm社区维护的规则集。

官方规则集如下：（按需安装）

# env转码规则
$ npm install --save-dev babel-preset-env

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段*语法提案*的转码规则
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
$ npm install --save-dev babel-preset-stage-4

然后将安装好的规则加入到 .babelrc 文件中

 {
    "presets": ["es2015", "react"],
    "plugins": []
  }

其中 babel-preset-env 规则可以根据配置的目标运行环境（environment）自动启用需要的 babel 插件。

 {
    "presets": ["env", options],
    "plugins": []
  }

上面的 options 可以配置运行 平台等信息。 此处不再展开。

可以看这篇文章详解：A preset that configures Babel for you

配置完毕，接下来可以使用了

命令行babel-cli

babel-cli 为 Babel 提供的命令行工具

安装：

$ npm install --global babel-cli

基本用法如下：

# 不加参数按预设转码example.js文件
$ babel example.js

# 设置转码结果输出文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

Babel-cli 使用详细文档

babel-node

babel-cli自带一个babel-node 命令。可以直接用来执行 ES6 脚本。

例如新建文件hello.js：

const hello = (name) => {
    console.log('Hello' + name)
}
hello('victor')

那么使用babel-node可直接执行：

$ babel-node hello.js
Hello victor

babel-polyfill

babel默认只转换新的句法（箭头函数、const、let等）。而不会转换新增的API（Promise及其方法等）。

如果想让这类方法运行，必须使用 babel-polyfill，为当前环境提供一个 腻子/垫片。

安装：

$ npm install --save babel-polyfill

然后在脚本头部引用即可：

import 'babel-polyfill'
// or
require('babel-polyfill')

结语

babel 还有很多功能和更深入的东西。但是目前我用到的基本就这些。这些东西算是到了够用的程度。更深入的学习还需要啃官方文档和前辈的文章。重点是结合实践效率更高。babel还可以和webpack mocha 等打包测试工具配合使用。后续会记录更多学习笔记。

第一次写笔记。掌握的还是不够详细。需要以后实践中反复验证之后再修改。