本节我们来学习如何安装 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;
};
网友评论