如何使用 babel

2016-06-14 浩阳 更多博文 » 博客 » GitHub »

ES2015 ES6 ES5 babel

原文链接 https://gaohaoyang.github.io/2016/06/14/how-to-use-babel/
注:以下为加速网络访问所做的原文缓存,经过重新格式化,可能存在格式方面的问题,或偶有遗漏信息,请以原文为准。


  • content {:toc}

Babel 用于将 ES6 的代码转化为 ES5,使得 ES6 可以在目前的浏览器环境下使用。学习使用 babel 是为了使用 ES2015 做准备。本文将介绍如何使用 babel,以及一些相关的配置。

学习 Babel 可以通过其手册 Babel handbook。

其中包含多语言版本,分为用户手册插件手册。这是一个很好的学习 Babel 的资料。

babel-cli

在 node 和 npm 环境安装好的前提下,安装 babel,如下:

npm install --global babel-cli

安装完成后就可以编译文件了。

babel main.js

编译后的文件显示在终端上,可以添加其他命令让它输出到指定文件下:

babel example.js --out-file compiled.js
或
babel example.js -o compiled.js

或将整个目录编译成一个新的目录:

babel src --out-dir lib
或
babel src -d lib

但这很麻烦,并且并不是一个很好的解决方案,请看下一节项目内运行 babel-cli。

在项目内运行 babel-cli

初始化项目

npm init

再安装 babel-cli

npm install --save-dev babel-cli

项目中的package.json应该包含如下内容:

{
  "name": "learn-es6",
  "version": "1.0.0",
  "devDependencies": {
    "babel-cli": "^6.10.1"
  }
}

添加 npm scripts 命令。

{
  "name": "learn-es6",
  "version": "1.0.0",
+   "scripts": {
+     "build": "babel src -d lib"
+   },
  "devDependencies": {
    "babel-cli": "^6.10.1"
  }
}

此时在终端里运行

npm run build

还不能成功编译,因为没有配置.babelrc文件。

配置.babelrc

通过配置.babelrc来告诉 babel 来做什么。

在项目的根路径下创建.babelrc文件。然后输入以下内容作为开始:

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

为了让 babel 将 ES2015 转化为 ES5,我们要安装如下:

npm install --save-dev babel-preset-es2015

安装完成后在.babelrc中添加参数:

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

现在在项目src/main.js中写一些 ES2015 的代码试试吧。

let a = 1

在终端中输入命令

npm run build

执行后终端中显示:

> learn-es6@1.0.0 build c:\gitWorkSpace\learn-es6
> babel src -d lib

然后可以看到目录中出现了lib/main.js

"use strict";

var a = 1;

即编译成功。

配置.jshintrc

若编辑器中安装了 jshint 语法检查的插件。默认对于 ES2015 的代码可能会报错或者警告,看着可能会不爽。我们可以在配置文件中将它设置为允许 ES2015 的模式。

在项目根目录下创建文件.jshintrc。内容如下:

{
    "asi": true,
    "esversion": 2015
}

上述文件我分别设置了,使用无分号模式,es 版本使用 2015。

关于.jshintrc的更详细配置可以参见官方示例:https://github.com/jshint/jshint/blob/master/examples/.jshintrc

好,babel 就说到这里,下面开始进入真正的 ES2015 的学习!