babel—ES6代码转换为ES5代码

为什么要将ES6代码转换为ES5代码？

为了浏览器兼容，以及为了在node.js环境可以顺畅运行应用程序。ES6作为JS的新规范，加入了很多新的语法和API，但现代浏览器对ES6新特性支持度不高，所以需将ES6代码转为ES5代码。

如何转换？

初始化项目

在工程目录下打开集成终端，输入下面其中一个命令初始化项目

cnpm/npm init //需要手动确认package.json文件的配置项

cnpm/npm init -y  // -y是指表示全部默认，不需要一个一个敲回车

命令执行完成后会在根目录生成package.json文件

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

1.安装转码工具babel

// -g全局安装babel工具

cnpm install -g babel-cli

// 安装转换包
cnpm install --save -dev babel-cli babel-preset-latest

2.安装转换规则

cnpm install -g babel-preset-latest

3.指定转换规则

3.1在项目根目录下新建.babelrc文件 

3.2输入如下代码

{
    "presets":["latest"]
} // 表示默认转码所有年份的js

4.将 ES6转换为ES5之后的文件/文件夹导入到另一个文件/文件夹当中(目标文件没有时会自动创建)

// 单个文件

babel 1-hello.js --out-file 2-hello.js

// 文件夹内的全部es6文件

babel src(要转换的es6文件目录) --out-dir dist(目标文件夹目录)