认识 Babel

根据 Babel 官网 所介绍，Babel 其实就是一个 JavaScript 的编译器，将 ES6 等高级语法转换为 ES6 之前 这些能被低级浏览器所兼容的语法的工具。

可以借助官网在线编译器来了解一下Babel。

Babel 本身可以编译 ES6 的大部分语法，比如 let、const、箭头函数、类，但是对于 ES6 新增的 API，比如 Set、Map、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不能直接编译，需要借助其他模块。Babel 一般需要配合 webpack 来编译模块语法。

Babel 的使用方式

可以在官网中查看不同平台的 Babel 使用方式：

这里推荐使用 CLI 的方式来使用 Babel，根据官网的指引进行依赖包的下载：

文档中也有提示，在安装依赖之前最好先创建一个package.json文件，直接 npm init 输入名称、版本等信息就创建好了，之后就可以运行 npm install --save-dev @babel/core @babel/cli 命令。

此时，可以看到package.json中是这些内容：

{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.11.0"
  }
}

只要package.json文件中记录了安装了哪些包，就可以在当前目录下使用 npm install 来安装所有依赖

使用 Babel 编译 ES6 代码

首先按照文档中的步骤3，将以下代码添加到package.json中：

  "scripts": {
    "build": "babel src -d lib"
  }

这个就是打包到lib文件夹的打包命令了，可以把lib改为比较常用的命名dist。

这段代码的意思是：

// babel src -d dist
// babel src --out-dir dist

// src 就是原目录，--out-dir 就是输出目录指令，dist 为输出目录

现在可以在当前目录下新建一个src文件夹，文件夹下新建一个babel.js文件，现在就可以开始编写 ES6 代码了

// babel.js
let name = 'jae';
const age = 23;
const add = (x, y) => x + y;
new Promise((resolve, reject) => {
  resolve('成功');
});
Array.from([1, 2]);
class Person {}
import './index.js';

然后在命令行输入命令：

npm run build

执行完后会发现当前目录下多出了一个dist文件夹，文件夹下有个babel.js文件。但是可以发现这个文件和src下的babel.js的内容是一模一样的，这是怎么回事呢？

这是因为缺少了babel的配置文件，接下来跟着官网文档的最后一步来配置一下：

使用命令行 npm install @babel/preset-env --save-dev 安装，之后package.json中的devDependencies会多出一项：

  "devDependencies": {
    "@babel/cli": "^7.10.5", // 提供babel命令能够在命令行使用
    "@babel/core": "^7.11.0", // 把功能拆分出去
    "@babel/preset-env": "^7.11.0" // ES6 语法如何转换为低等级的语法
  }

紧接着在当前目录下新建.babelrc文件：

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

此时再执行一下build命令，可以看到dist文件夹下的babel.js文件已经被成功转义了：

// dist/babel.js
"use strict";

require("./index.js");

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var name = 'jae';
var age = 23;

var add = function add(x, y) {
  return x + y;
};

new Promise(function (resolve, reject) {
  resolve('成功');
});
Array.from([1, 2]);

var Person = /*#__PURE__*/_createClass(function Person() {
  _classCallCheck(this, Person);
});