Babel 安装 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 模块中。
【Babel 安装】当我们执行这个命令后，效果如下所示：

文章图片

其中 --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 编译代码啦：