一句话总结：用WebStorm自带的File Watcher功能+Babel实现自动转换ECMAScript 6代码为ES5代码
1.
新建一个Empty Project，然后在src目录下新建了一个main.js；
// 这一步不是必须的 只是刚上手的话 从空项目开始自己配置会少很多干扰
2.
进入设置，把JavaScript language version改成ECMAScript 6；
3.
再Then..写一段ES6代码
'use strict'; // node直接运行ES6代码时，如使用了ES6的一些关键字，比如let，就需要严格模式，否则会报错 // 这是没有严格模式时候的错误提示 // SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode function* fibs() {// Generator Function let a = 0; let b = 1; while (true) { yield a; // [a, b] = [b, a + b]; b = a + b; a = b - a; } } let [first, second, third, fourth, fifth, sixth] = fibs(); console.log(first, second, third, fourth, fifth, sixth);4.
现在IDE会出现一个File watcher提示条
先别点Add watcher！我们要先去装babel～
首先在根目录新建一个package.json { "name": "test-project", "version": "1.0.0" } 然后打开IDE的Terminal，安装babel-cli npm install --save-dev babel-cliGood! 现在可以去点Add watcher啦，点完之后会弹出一个框，其中大部分设置IDE都帮你搞定了
下面第三行，Program那一项，填（其实选的是 babel.cmd） $ProjectFileDir$/node_modules/.bin/babel 然后点OK，这个时候你就会发现左边多出来一个main-compiled.js文件啦
但是还没搞定！现在只是搞定了自动转换的功能，系统默认把ES6 compile成了ES6..（你应该会发现compile出来的东西跟原来的一样..Generator函数并没有被转换成ES5的格式）
所以我们需要安装Babel的preset以正确识别ES6代码；
npm install --save-dev babel-preset-es2015 在根目录下新建一个.babelrc文件（就是babel在当前项目的配置文件），写上 { "presets": [ "es2015" ] }
OK搞定！保存再回去看一下main-compiled.js 应该就变成这个样子啦，现在你在main.js里直接写ES6代码，IDE都会自动compile成ES5的代码在这里啦～
转载于:https://www.cnblogs.com/hjsblogs/p/5889148.html
