关于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() {}