babel【1】：babel 的安装，配置与转码

一、babel 安装

• 1、Babel 依赖 Node.js，没有安装的话，去官网下载安装最新稳定版本的 Node.js。
• 2、在本地新建一个文件夹 babel01，在该文件夹下新建一个 js 文件，文件命名为 babel.config.js。该文件是 Babel 配置文件 ，我们在该文件里输入如下内容：

  module.exports = {
    presets: ["@babel/env"],
    plugins: []
  }

• 3、然后在该文件夹下新建一个 js 文件 main.js，该j s里的代码是我们需要转译的，我们写入代码

 var fn = (num) => num + 2;

• 4、然后执行下面的命令安装三个 npm 包，这些 npm 包是 Babel 官方包

// npm 一次性安装多个包，包名之间用空格隔开
npm install --save-dev @babel/cli @babel/core @babel/preset-env

• 5、安装完成后，执行下面的命令进行转码，该命令含义是把 main.js 转码生成 compiled.js 文件

npx babel main.js -o compiled.js

• 6、此时文件夹下会生成 compiled.js，该文件是转换后的代码：

"use strict";
  var fn = function fn(num) {
    return num + 2;
  };

image.png

注意：这就是一个最简单的 Babel 使用过程，我们把用 ES6 编写 main.js 转换成了 ES5 的 compiled.js。

二、Babel 转码说明

• 1、babel.config.js 是 Babel 执行时会默认在当前目录寻找的 Babel 配置文件。
• 2、除了 babel.config.js，我们也可以选择用 .babelrc
  或 .babelrc.js 这两种配置文件，还可以直接将配置参数写在 package.json。它们的作用都是相同的，只需要选择其中一种。 我们将在另外一节详细介绍 Babel
  的配置文件，接下来默认使用 babel.config.js。
• 3、@babel/cli，@babel/core 与 @babel/preset-env
  是 Babel 官方的三个包，它们的作用如下：

1.  @babel/cli
    @babel/cli 是 Babel 命令行转码工具，如果我们使用命令行进行 Babel 转码就需要安装它

2.  @babel/cli
    @babel/cli 依赖 @babel/core，因此也需要安装 
 @babel/core 这个 Babel 核心 npm 包。

3.  @babel/preset-env
    @babel/preset-env 这个 npm 包提供了 ES6 转换 
 ES5 的语法转换规则，我们在 Babel 配置文件里指定使用它。如果不使用的话，也可以完成转码，但转码后的代码仍然是 ES6 的，相当于没有转码。

三、小结

• 1、一个完整的 Babel 转码工程通常包括以下

1. Babel 配置文件
2. Babel 相关的 npm 包
3. 需要转码的 JS 文件

• 2、我们通过以下命令对单个 JS 文件进行转码：

npx babel main.js -o compiled.js