webstrom 配置 es6 的运行环境

Win7 下 WebStrom 配置 es6 的运行环境，WebStrom 的版本是 11.0.3，其他的版本，可能略有所不同。

1. node.js 安装

首先 WebStrom 需要安装 node.js，以支持 npm 指令。

安装node.js程序，按照提示一步步安装即可，注意在安装时，勾选自动添加到 系统环境 中的选项。

Node.js安装完成后，检查环境变量path中是否配置了Node.js；在命令行中输入”path”，结果如下：

检查Node.js是否安装成功，也可直接在命令行中输入“node -v”，进行测试，结果中显示当前安装的 node.js 的版本，说明安装正确了。

开始在WebStorm中配置node.js。File->settings 输入node.js，配置Node interpreter；

2. ES6 语法支持设置

File > Settings > Languages & Frameworks > JavaScript

3. 自动转码为ES5

file watcher + babel-cli（ES6转码器）

你可能希望你写的代码有更好的兼容性，但目前的ES6肯定不是所有浏览器都支持的，所以我们要用到ES6转码器。

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在浏览器或其他环境执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。

而且你还希望每次修改代码时能自动转码，所以还要用到webstorm的file watcher（当然还有其他解决方案）

首先需要在你准备安装 babel 的根目录下(或是当前项目下)手动新建一个 package.json 文件，内容如下：

{
  "name": "yourProjectName",
  "version": "1.0.0"
}

• 打开IDE的Terminal

  View > Tool Windows > Terminal

  在打开的 Terminal 窗口中输入以下命令，开始安装babel-cli

  npm install –save-dev babel-cli //*注意save前面是两个[-]

  这个时候若是老是卡在如下提示：

  [ …………..] - fetchMetadata: sill mapToRegistry uri https://registry.n

  请先修改 registry 再试试：

  首先在 CMD 窗口中输入如下代码：

  npm config get registry

  先查看当前的 registry 是否是：

  https://registry.npmjs.org/

  如果是的话，使用如下命令修改：

  npm config set registry https://registry.npm.taobao.org

  完成后再次使用如下命令，查看是否修改成功：

  npm config get registry

• 添加 file watcher

  File > Settings > Tools > File Watchers

点击右边的 +号添加 babel，如下：

然后在打开的配置界面中，其他配置项可以不做修改，只需要修改 Program 这一栏，找到你安装的 babel-cli 的安装目录下的 安装目录\node_modules\.bin\babel.cmd，安装目录一般在你 Webstrom 的工程目录同级。

然后点击 OK就可以了，这个时候你就会发现左边文件目录中多出来一个 *-compiled.js 和 *-compiles.js.map 文件.

还差一步操作，现在只是搞定了自动转换的功能，系统默认把ES6 compile成了ES6..（你应该会发现 compile 出来的东西跟原来的一样. *-compiled.js文件中的内容并没有被转换成ES5的格式），所以我们需要安装Babel的preset以正确识别ES6代码。

• 安装 babel 的 ES6 preset

  在 WebStrom 的 Terminal 窗口中输入如下命令：

  npm install –save-dev babel-preset-es2015 //*注意save前面是两个[-]

  如果是 WebStrom 2017 后面的版本，不能安装 es2015，这个已经被 env 所代替了，需要安装使用如下 preset:

  npm install –save-dev babel-preset-env //*注意save前面是两个[-]

• 手动添加 babel 的配置文件

  （这个配置也可以不用，默认就是的）在根目录下新建一个.babelrc文件（就是babel在当前项目的配置文件），写上

{
  "presets": [
    //"es2015" --如果是 WebStrom 2017 后面的版本，这里不能再使用 es2015 了，需要使用最新的 env
    "env"
  ]
}

现在全部 OK 了，在 WebStrom 中正确书写 ES6 的代码，会自动编辑成 ES5 的 -compiled.js 文件。
注意 package.json 里面的内容应该如下：

{
  "name": "test-project",
  "version": "1.0.0",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.0"
  }
}

3. 示例：

//ES6 中的代码：
let a = `日期${new Date()}`;
console.log(a);

//动态创建表格
const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;
const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' }
];

转换成的 -compiled.js 文件中的代码：

//自动转换成的 ES5 的代码
var a = "\u65E5\u671F" + new Date();
console.log(a);

//动态创建表格
var tmpl = function tmpl(addrs) {
    return "\n  <table>\n  " + addrs.map(function (addr) {
        return "\n    <tr><td>" + addr.first + "</td></tr>\n    <tr><td>" + addr.last + "</td></tr>\n  ";
    }).join('') + "\n  </table>\n";
};
var data = [{ first: '<Jane>', last: 'Bond' }, { first: 'Lars', last: '<Croft>' }];

console.log(tmpl(data));

4. 注意：

配置好 babel 的 file Watcher 后，文件只要一有修改，就会触发这个自动转换。如此以来，整个 WebStrom 就会很卡，一直在编译。

为了解决这个问题，我们可以关闭 WebStrom 的自动保存功能，并且关闭 file watcher 的文件改变时就触发的自动监听，让文件在保存是触发这个转换事件。

• 关闭 WebStrom 的自动保存功能

首先，关闭自动保存：

File > Settings >Appearance & Behavior > System Settings

然后，打开没有保存文件的提示图标：

File > Settings > Editor > General > Editor Tabs

• 关闭 Babel File Watcher 的自动监听

点击 OK 就可以了，现在需要使用 Ctrl + S 手动保存后，才会进行转换。