关于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 模块中。

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

其中 --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;};

关于babel:Babel-安装

筹备工作

创立我的项目

开始应用

脚本命令设置

示例：