ES6转ES5之WebStorm + Babel

前提：电脑上已经安装好了npm

Babel + WebStorm

1. 安装全局的babel（也可以单独安装在某个文件夹下）

电脑终端命令 （按顺序执行）

 $ npm install -g babel-cli

 $ npm install --save-dev babel-preset-env

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

2. WebStorm配置

新建一个项目，在项目中新建一个js文件。

新建项目

这个js文件写ES6代码。直接写ES6代码会报错，要开启WebStorm对ES6的支持。

WebStorm --  Preferences -- Languages & Frameworks -- JavaScript -- JavaScript language version -- ECMAScript6 -- ok

开启ES6支持

开启Babel转码

WebStorm --  Preferences -- Tools -- File Watchers

Babel配置-01

点击上面图片所示的“+”号，选择Babel

Babel配置-02

双击Babel

Babel配置-03

点击下方的ok

Babel配置-04

在之前新建的js文件中写入ES6代码，会自动生成dist的文件夹(这个文件夹的命名和路径可以自己设置，就在上面图片所示的Arguments和Output path to refresh中)。

Babel配置-05

dist文件夹下的test.js文件就是经过转码之后的ES5代码。

转码成功

---

你所羡慕的一切，都是有备而来。