0.什么是Babel

Babel 是一个 JavaScript 编译器，具有以下特性。

Babel 本身可以编译 ES6 的大部分语法；
ES6 Module 语法一般需要使用 Webpack 来处理；
Babel 本身不能编译 ES6 新增的 API，需要借助其它的模块。

1.使用 Babel 的流程

1.安装 Node.js（https://nodejs.org/en/），在项目根目录初始化项目，生成 package.json 文件。
cmd

C:\Users\Daixiang\Desktop\demo>npm init

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2.安装 Babel 需要的包（@babel/core、@babel/cli 和@babel/preset-env）。

cmd

C:\Users\Daixiang\Desktop\demo>npm install --save-dev @babel/core @babel/cli @babel/preset-env

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src - d dist"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.15.7",
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8"
  }
}

3.在 package.json 文件添加执行编译的命令。

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

4.创建配置文件 .babelrc，并配置。
.babelrc

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

5.编译并测试。

C:\Users\Daixiang\Desktop\demo>npm run build

> babel@1.0.0 build C:\Users\Daixiang\Desktop\demo
> babel src -d dist

Successfully compiled 3 files with Babel (957ms).