在不使用webpack等打包构建工具的情况下=>使用babel-cli快速地将ES6转化为ES5语法

1. 新建项目目录，在根目录下建立两个文件夹（src和dist）和主文件（index.html）:

• src：编写的 ES6 语法的 JS 文件存放的目录，如 es6.js；
• dist：用 babel 将 ES6 语法编译为 ES5 语法后存放的目录,如 es5.js；
• index.js：文件中 <script> 标签引入的 JS 文件为 dist 文件夹中编译好的 ES5 语法的 JS 文件，如：

<script src="./dist/es5.js"></script>

2. 初始化项目，创建 package.json 文件

npm init -y

     顺便修改其中 "scripts" 内容，简化编译转化命令

// 将 package.json 中的以下内容：
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }

// 修改为：
"scripts": {
    "build": "babel src/es6.js -o dist/es5.js"
  }

3. 先全局安装 Babel-cli，再本地开发依赖安装 babel-cli 和 babel-preset-es2015

// -g 全局安装
cnpm i babel-cli -g

// -D 本地开发依赖安装
cnpm i babel-cli babel-preset-es2015 -D

4. 根目录下新建 .babelrc 文件，并输入：

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

5. 这样子 ES6 的开发环境就搭建好了，接下来就可以开心的写 ES6 代码了，写完可以运行 npm run build 命令进行转化了。

---

注：

虽说 babel-preset-es2015 已经过时了，但用起来简单方便，仅转化 ES6 基本够用，适合新手

若使用 babel-preset-env 可参考：官网 babel-preset-es2015 -> babel-preset-env

                                                      中文网站 https://www.babeljs.cn/docs/plugins/preset-env