一、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
网友评论