详解设置Webstorm 利用babel将ES6自动转码成ES5

下面是详细讲解“详解设置Webstorm 利用babel将ES6自动转码成ES5”的完整攻略：

1. 安装和配置Babel

首先需要安装Babel，并通过npm安装相关的转码插件。在终端命令行中输入以下两行命令：

npm install --save-dev babel-cli babel-preset-env
npm install babel-plugin-transform-runtime --save-dev

安装完成后，需要在项目根目录下创建一个名为babel.config.json的配置文件，内容如下：

 {
   "presets": [
     [
       "@babel/preset-env",
       {
         "useBuiltIns": "usage",
         "corejs": 3,
         "targets": "> 0.25%, not dead"
       }
     ]
   ],
   "plugins": [
     [
       "@babel/plugin-transform-runtime",
       {
         "corejs": 3
       }
     ]
   ]
 }

2. 在Webstorm中的设置

1. 首先需要在Webstorm中安装Babel插件。启动Webstorm后，选择Preferences或Settings，然后选择Plugins，在搜索框中输入“Babel”，选择“Babel JavaScript”插件并安装。

2. 配置Babel。在Webstorm的主菜单中选择Preferences或Settings，然后选择Languages & Frameworks，选择JavaScript，再选择Babel。勾选Enable，然后将Configuration file设置为前面创建的babel.config.json文件。

3. 配置JavaScript版本。在Webstorm的主菜单中选择Preferences或Settings，然后选择Languages & Frameworks，选择JavaScript，再选择JavaScript language version。将其设置为ECMAScript 6（最新版本）。

4. 配置文件类型。在Webstorm的主菜单中选择Preferences或Settings，然后选择Editor，选择File Types。在Recognized File Types中选择JavaScript，在下面的Registered Patterns中添加 *.js 和 *.jsx

3. 示例说明

例如有以下的一段ES6代码：

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3));

通过上述的步骤，Webstorm会自动将其转码为ES5的代码，如下：

"use strict";

var arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3));

另外一个示例，是关于ES6语法中的箭头函数。例如有以下的一段代码：

let arr = [1, 2, 3, 4, 5];
let evens = arr.filter(n => n % 2 == 0);
console.log(evens);

转码后的ES5代码如下所示：

"use strict";

var arr = [1, 2, 3, 4, 5];
var evens = arr.filter(function (n) {
  return n % 2 == 0;
});
console.log(evens);

通过以上两个示例，可以看到Babel的转码效果，以及Webstorm中的配置步骤和操作方法。