Babel 安装

本节我们来学习如何安装 Babel。安装 Babel 后我们就可以将使用 ES2015 + 语法的 JavaScript 应用程序代码,编译为可在当前浏览器中使用的代码。本教程我们学习 Babel7 版本的知识。
准备工作 Babel 是基于 Node.js 的,如果我们要安装 Babel ,那么需要先安装好 Node.js
Node.js 的官网地址:https://nodejs.org/en/。然后按照提示进行安装即可。
安装好后,我们可以在命令工具中输入 node -vnpm -v 来检测一下 Node.jsnpm 是否安装成功,如果出现版本号则表示安装成功,如果所示:
Babel 安装
文章图片

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

mkdir my_babel

命令执行完毕后,指定路径中会成功创建一个名为 my_babel 的文件夹,如下图:
Babel 安装
文章图片

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

node 开发中执行上述命令会生成一个 pakeage.json 文件,这个文件主要是用来记录这个项目的详细信息的,它会将我们在项目开发中所要用到的包,以及项目的详细信息等记录在这个项目中。在以后的版本迭代和项目移植的时候会更加的方便。并且使用 npm init 初始化项目还有一个好处,就是在进行项目传递的时候不需要将项目依赖包一起发送给对方,对方在接受到你的项目之后再执行 npm install 就可以将项目依赖全部下载到项目里。
如下图所示,执行命令后会让我们填写一些配置信息,如果还不知道怎么填写的话可以一路回车:
Babel 安装
文章图片

如果想要所有的配置项都选择默认选项,可以直接执行 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/clibabel 提供的内建的命令行工具,主要是提供 babel 这个命令来对 js 文件进行编译。Babel 的核心功能位于 @babel/core 模块中。
【Babel 安装】当我们执行这个命令后,效果如下所示:
Babel 安装
文章图片

其中 --save 表示在项目内安装,不是全局安装。-dev 是开发环境,开发时需要依赖,正式上线时不需要依赖的。不使用全局安装 Babel CLI,是因为可能同一计算机中不同项目可能需要不同版本的 Babel,这样更新也更加方便。
安装成功后,@babel/cli 会添加到 package.json 文件中的 devDependencies 依赖中,例如:
"devDependencies": { "@babel/cli": "^7.11.5", "@babel/core": "^7.11.5" }

如果我们想成功使用 Babeles6 转化为 es5,还需要可以安装一个 @babel/preset-es2015 预设:
npm install --save-d @babel/preset-es2015

如下图所示:
Babel 安装
文章图片

但此时还不能成功编译代码,如果要进行代码编译,我们需要在项目根目录创建一个 .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; };

    推荐阅读