【ES】【JS】Babel转码器

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});

上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行了。

安装：

在项目目录中安装Babel

npm install --save-dev @babel/core

使用Babel的第一步就是配置 .babelrc 配置文件，存放在项目的根目录下。

该文件用于设置转码规则和插件，基本格式如下

{
  "presets": [],
  "plugins": []
}

 presets 字段设定转码规则，官方提供以下的规则集，根据需要进行安装。

// 最新转码规则
npm install --save-dev @babel/preset-env

// react 转码规则
npm install --save-dev @babel/preset-react

安装之后检查配置文件

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

！所有 Babel 工具和模块的使用，都必须先写好 .babelrc 。

工具使用：

命令行转码

Babel 提供命令行工具 @babel/cli ,用于命令行转码。

安装命令：

npm install --save-dev @babel/cli

基本用法：

// 转码结果输出到标准输出
npx babel example.js

/// 转码结果写入一个文件
// --out-file 或 -o 参数指定输出文件
npx babel example.js --out-file compiled.js
// 或者
npx babel example.js -o compiled.js

// 整个目录转码
// --out-dir 或 -d 参数指定输出目录
npx babel src --out-dir lib
// 或者
npx babel src -d lib

// -s 参数生成source map文件
npx babel src -d lib -s

模块

babel-node模块

@babel/node 模块的 babel-node 命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码。

安装模块

npm install --save-dev @babel/node

然后，执行 babel-node 就进入 REPL 环境。

npx babel-node

babel-node模块

@babel/register 模块改写 require 命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用 Babel 进行转码。

安装模块

npm install --save-dev @babel/register

使用时，必须首先加载 @babel/register 。

// index.js
require('@babel/register');
require('./es6.js');

需要注意的是，@babel/register 只会对 require 命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。