Babel 安装

本节我们来学习如何安装 Babel。安装 Babel 后我们就可以将使用 ES2015 + 语法的 JavaScript 应用程序代码，编译为可在当前浏览器中使用的代码。本教程我们学习 Babel7 版本的知识。

准备工作

Babel 是基于 Node.js 的，如果我们要安装 Babel ，那么需要先安装好 Node.js。

Node.js 的官网地址：https://nodejs.org/en/。然后按照提示进行安装即可。

安装好后，我们可以在命令工具中输入 node -v 和 npm -v 来检测一下 Node.js 和 npm 是否安装成功，如果出现版本号则表示安装成功，如果所示：

创建项目

首先我们来创建一个项目，在命令工具中使用 cd 命令进去指定路径，在指定路径下执行如下命令：

mkdir my_babel

命令执行完毕后，指定路径中会成功创建一个名为 my_babel 的文件夹，如下图：

然后需要使用 cd 命令进入这个项目路径，接着执行初始化命令：

npm init

在 node 开发中执行上述命令会生成一个 pakeage.json 文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。在以后的版本迭代和项目移植的时候会更加的方便。并且使用 npm init 初始化项目还有一个好处，就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行 npm install 就可以将项目依赖全部下载到项目里。

如下图所示，执行命令后会让我们填写一些配置信息，如果还不知道怎么填写的话可以一路回车：

如果想要所有的配置项都选择默认选项，可以直接执行 npm init -y 命令，这样能快速生成一个 package.json 文件。

• package name ：字段表示项目名称。
• version： 表示版本号。
• description： 表示对项目的描述。
• entry point：项目的入口文件。
• test command：项目启动的时候要用什么命令来执行脚本文件。
• git repository：如果你要将项目上传到 git 中的话，那么就需要填写 git 的仓库地址。
• keywirds：项目关键字。
• author：作者的名字。
• license：发行项目需要的证书。

开始使用

我们在使用 Babel 之前，大致了解一下 Babel 的各个组成部分，下面是 Babel 中一些常用的重要部分：

• @babel/cli
• @babel/core
• @babel/preset-env
• @babel/polyfill
• @babel/runtime
• @babel/plugin-transform-runtime
• @babel/plugin-transform-xxx

主要注意的是 @ 符号，这个符号是 babel7 才有的特性，这是 babel7 的一个重大调整，原来的 babel-xx 包统一迁移到 babel 域下，而域由 @ 符号来标识。

例如要安装 Babel CLI，如果在 babel6 是没有 @ 符号的，如下命令如下所示：

npm install --save-dev babel-cli

而换成 babel7 ，则变需要安装 @babel/cli ，命令如下所示：

npm install --save-dev @babel/core @babel/cli

@babel/cli 是 babel 提供的内建的命令行工具，主要是提供 babel 这个命令来对 js 文件进行编译。Babel 的核心功能位于 @babel/core 模块中。

当我们执行这个命令后，效果如下所示：

其中 --save 表示在项目内安装，不是全局安装。-dev 是开发环境，开发时需要依赖，正式上线时不需要依赖的。不使用全局安装 Babel CLI，是因为可能同一计算机中不同项目可能需要不同版本的 Babel，这样更新也更加方便。

安装成功后，@babel/cli 会添加到 package.json 文件中的 devDependencies 依赖中，例如：

"devDependencies": {
    "@babel/cli": "^7.11.5",
    "@babel/core": "^7.11.5"
}

如果我们想成功使用 Babel 将 es6 转化为 es5，还需要可以安装一个 @babel/preset-es2015 预设：

npm install --save-d @babel/preset-es2015

如下图所示：

但此时还不能成功编译代码，如果要进行代码编译，我们需要在项目根目录创建一个 .babelrc 配置文件，并定义安装好的预设。

我们执行如下命令创建配置文件：

type nul>.babelrc

在文件中添加参数：

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

这样我们就可以执行 npx babel index.js 命令来编译代码了，index.js 是需要编译的 .js 文件。

脚本命令设置

除了使用 npx babel 命令直接运行 Babel，我们可以直接将命令放入使用本地版本的 npm 脚本中。只需要 在 package.json 文件中的 scripts 字段中添加一个字段即可。

例如下列命令表示编译整个 src 中的文件并输出到 lib 文件夹中，添加如下命令后就可以 build 编译代码啦：

"scripts": {
    "build": "babel src -d lib"
},

示例：

我们可以来试一下效果，例如我们在 src 文件夹中创建一个 index.js 文件，并写入如下内容：

var add = (x, y) => x + y;

然后在命令工具中执行 npm run build 命令：

>　npm run build

此时 lib 文件夹下也会生成一个 index.js 文件，这个文件中的内容是编译后的代码，如下所示：

"use strict";

var add = function add(x, y) {
  return x + y;
};