关于babel:ES6转换成ES5

一、 介绍

 ECMAScript 6(ES6)的倒退速度十分之快，但古代浏览器对ES6新个性反对度不高，所以要想在浏览器中间接应用ES6的新个性就得借助别的工具来实现。

Babel是一个宽泛应用的转码器，babel能够将ES6代码完满地转换为ES5代码，所以咱们不必等到浏览器的反对就能够在我的项目中应用ES6的个性。
babel只是转译新规范引入的语法，比方ES6的箭头函数转译成ES5的函数；而新规范引入的新的原生对象，局部原生对象新增的原型办法，新增的API等（如Proxy、Set等），这些babel是不会转译的。须要用户自行引入polyfill来解决
请移步深刻了解Babel原理及其应用

二、应用

1、新建工程文件夹这里起名叫做es6,而后在外面创立两个文件夹别离为src 、js如下图：(src为待转换es6 js寄存目录，js为编译实现后的es5 js寄存目录)

2、在src目录下新建一个js文件（这里起名叫做index.js），外面输出es6的代码：

let b = 1;
console.log(b);
const name = '张三';
console.log(name);
let c = '胜利了么';
setTimeout(() => {
    console.log(c)
}, 200)

3、 初始化我的项目

1）关上终端命令提示符 进入工程目录（这里也就是es6文件夹）输出如下命令初始化我的项目：（这里用的npm,国内用户倡议用cnpm不懂得能够移步至淘宝镜像应用）命令执行实现后会在根目录生成package.json文件。

npm init -y //-y是指示意全副默认，不须要一个一个敲回车

2）关上咱们能够看到外面的内容（能够依据本人的须要进行批改，比方咱们批改name的值。）

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

三、全局装置babel工具

1）在终端中输出以下命令,

npm install -g babel-cli

2）尽管曾经装置了babel-cli，只是这样还不能胜利进行转换，咱们还须要装置转换包能力胜利转换。

npm install --save-dev babel-preset-es2015 babel-cli

3）装置实现后，咱们能够看一下咱们的package.json文件，曾经多了devDependencies选项。

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev":"babel src --out-dir js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
} 

四、新建.babelrc

在我的项目根目录新建(.babelrc)文件输出如图所示代码：

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

五、当初你能够纵情转换了

终端输出如下命令：（babel 待转换门路/ –out-dir 转换后门路/）
咱们这里是从src转换到js目录下

babel src --out-dir js

当初咱们js目录上面就生成了编译后的js咱们关上看一下(功败垂成)
是不是每次这样输出一大串命令感觉很麻烦？
通过批改package.json外面的别名来实现编译 批改（“dev”:“babel src –out-dir js”）

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev":"babel src --out-dir js"
  },
  "author": "",
  "license": "ISC"
}

当前你只须要如下命令就能够编译了（是不是感觉很简略呢）

npm run dev

此办法不能用于转换Vue语法

//无论是
created(){}
//还是
created:function() {}
//最终转换为：
created: function created() {}