把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。严格来说，babel 也可以转化为更低的规范。但以目前情况来说，es5 规范已经足以覆盖绝大部分浏览器，因此常规来说转到 es5 是一个安全且流行的做法。

ES6转ES5（第一种）

初始化项目

新建babel目录

初始化项目

  1. npm init --y

-y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json

安装依赖
  1. npm install babel-cli -D
  1. npm install babel-preset-es2015 -D

使用es6的语法举下例子，看下能否转译成es5语法。我们假设取名index.js，放在项目根目录的src文件夹里。

  1. // src/index.js
  2. let a = 1;
  3. let fun = ()=>{
  4.     console.log(a);
  5. }

编辑package.json

我们需要自己在scripts字段里添加命令：

  • build-t ：单独编译某个文件
  • build-d：把一个文件夹内的所有文件统一编译到另一个文件夹里（文件夹自动生成，不需要自己创建）
  • build-o：把一个文件夹内的指定文件编译到另外的文件夹里（文件夹需要自己创建，可以指定文件名）
  1. "scripts": {
  2.     "build-t":"babel index.js --presets es2015",
  3.     "build-d": "babel src -d lib --presets es2015",
  4.     "build-o":"babel src/index.js -o dist/index.js --presets es2015"
  5.   },

启动编译
  1. npm run <这里是scripts字段的命令>

参考文档

一分钟入门 Babel（下一代 JavaScript 语法的编译器）