Babel 是一个 JavaScript 的转译器。它的主要功能就是把 ES2015+ 的代码转换为 ES5 或更低版本的 JavaScript 代码。有了 Babel，您就可以使用最新的 JavaScript 语法，不用太担心浏览器的兼容问题。

这篇文章只是简单的 Babel 使用教程，不包含 Webpack 相关的配置。

Babel 有网页版和 Node 开发的安装版，这里主要写的是安装版。

如果要使用网页版可以访问：https://babeljs.io/repl/ ，一些简单的转换也可以用网页版。

项目初始化

这里的初始化主要就是需要生成一个 package.json 文件，可以在命令行输入：

npm init -y

如果不包含 -y 的话，需要手动输入项目的基本信息。

初始化完成后就可以安装 Babel 了。

安装

首先需要安装 babel/cli，babel/cli 的功能就是通过命令行编译文件。

在当前项目安装：

npm install --save-dev @babel/cli

一般建议在项目中安装，这样可以在不同的项目中使用不同版本的 Babel。如果要在全局安装可以把 --save-dev 改为 -g 。

安装 babel/core：

npm install --save-dev @babel/core

babel/core 的主要功能就是调用 Babel 的 API 转码。

安装完 babel/cli 和 babel/core 后，项目根目录下的 package.json 文件中应该会多出如下内容：

{
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4"
  }
}

Babel 把编译功能拆分成了很多插件，所以即便安装了 babel/cli 和 babel/core 也还是不能使用，还需要继续安装插件。

安装 babel-preset-env：

npm install --save-dev @babel/preset-env

Babel 的插件有很多，如果您不了解 ES6 和各种浏览器的兼容性的话，很难选择插件。babel-preset-env 就是一个集成了很多常用插件的模块。安装了 babel-preset-env，您就不用去考虑各种浏览器的兼容问题了。

配置

安装完 babel-preset-env 后，您还是不能立刻使用 Babel 转码，还需要配置 babel-preset-env。

在项目根目录下建立一个 .babelrc 文件，文件没有任何后缀。

在 .babelrc 中输入如下的配置信息：

{
  "presets": ["@babel/preset-env"]
}

保存后就可以使用 Babel 了。

使用

编译后在终端输出代码：

npx babel jsFile.js

其中的 jsFile.js 就是文件名。

下面是一个 ES6 的 JS 文件：

const a = 1;
let f = txt => {
    return txt;
}

使用 npx babel 编译后终端输出了：

var a = 1;

var f = function f(txt) {
  return txt;
};

编译后输出 JS 文件：

npx babel jsFile.js --out-file newJsFile.js

其中的 jsFile.js 是要编译的 JS 文件，newJsFile.js 是编译后输出的 JS 文件。

如果我要让 src 目录下的 index.js 编译后在 dist 目录下输出 index.js 就可以这样写：

npx babel src/index.js --out-file dist/index.js

其中的 --out-file 也可以简写为 -o 。

如果需要监听文件，当文件内容改变时自动编译，可以使用：

npx babel jsFile.js --watch --out-file newJsFile

主要就是加一个 --watch ，--watch 也可以简写为 -w 。

如果要编译整个目录中的文件可以使用：

npx babel src --out-dir dist

上面命令的意思就是编译 src 目录下的所有文件，然后输出到 dist 目录。

如果要把整个目录下的文件编译为一个文件可以使用：

npx babel src --out-file newJsFile.js

其中的 src 是目录名称，newJsFile.js 是编译后的文件名。

babel-polyfill

下面是一个包含 Map 数据结构的 ES6 代码：

const m = new Map([
    ['cn', '中国'],
    ['us', '美国'],
    ['uk', '英国']
]);
m.set('jp', '日本');
console.log(m.get('cn'));

使用 Babel 转换后如下：

"use strict";

var m = new Map([['cn', '中国'], ['us', '美国'], ['uk', '英国']]);
m.set('jp', '日本');
console.log(m.get('cn'));

用 IE11 运行一下，控制台输出了 undefined 。

Babel 只能转换语法部分，不能转换新增的 API，也就是说 ES6 中的 Set 、Map 之类的都是无法转换的。

如果需要转换 API 部分还需要用到 babel/runtime 或 babel/polyfill。因为我这里没有用到 Webpack ,所以就直接在 HTML 中引入 babel-polyfill.js 。

可以直接使用 https://www.bootcdn.cn/babel-polyfill/ 上面的 CDN 引入 babel-polyfill，也可以下载 JS 文件。压缩后的 babel-polyfill.js 差不多在 98k 左右。

引入 babel-polyfill.js 后，ES6 中新增的一些 API 就可以使用了。

相关文章：