如何使用 babel

Posted 2020-11-28 lijianming180

• babel-cli
• 在项目内运行 babel-cli
• 配置.babelrc
• 配置.jshintrc

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

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

• 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 大专栏  如何使用 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:gitWorkSpacelearn-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 的学习！