本篇总结几种在WebStorm下使用ES6的方式。
首先要选择Javascript的版本。依次点击"File","Settings","Languages & Frameworks","Javascript",在"Javascript Language Version"中选择"ECMAScript6"。
创建一个名称为calc.js的文件。
class Calc{ constructor(){ console.log('Calc constructor'); } add(a,b){ return a + b; }}var c = new Calc();console.log(c.add(2, 3));
为了让ES6代码编译为ES5代码，需要用到Google的Traceur编译器。
在网页中插入Traceur编译器
创建一个index.html页面如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><script src='/images/loading.gif' data-original="https://traceur-compiler.googlecode.com/git/bin/traceur.js" type="text/javascript"></script><script src='/images/loading.gif' data-original="https://traceur-compiler.googlecode.com/git/src/bootstrap.js" type="text/javascript"></script><script> traceur.options.experimental = true;</script><script type="module" src='/images/loading.gif' data-original="js/calc.js"></script></body></html>
这种做法不好之处在于需要能访问到https://traceur-compiler.googlecode.com/git/bin/traceur.js这个文件。
使用Traceur命令行
→ 全局安装Traceur, 在控制台中输入：
npm install -g traceur
→ 在项目中引入Traceur相关文件，在控制台输入：
npm install traceur
→ 使用Traceur命令把es6版本的js/calc.js文件编译成es5版本的out/calc5.js文件。在控制台输入：
traceur --out out/calc5.js js/calc.js --exprimental
在index.html中引用如下两个js文件。
<script src='/images/loading.gif' data-original="node_modules/traceur/bin/traceur-runtime.js"></script><script src='/images/loading.gif' data-original="out/calc5.js"></script>
Traceur结合使用Grunt
→ 重新创建一个项目
→ 依次点击"File","Settings","Languages & Frameworks","Javascript",在"Javascript Language Version"中选择"ECMAScript6"。
→ 在项目中引入Traceur相关文件，在控制台输入：
npm install traceur
→ 确保已安装了GRUNT cli(npm intstall -g grunt-cli)。
→ 在项目中安装Grunt。
npm install grunt --save-dev
→ 安装grunt-traceur-latest插件。
npm install grunt-traceur-latest --save-dev
→ 安装grunt-contrib-watch插件。
npm install grunt-contrib-watch --save-dev
→ 在项目根目录下创建build文件夹以及app.js文件。
→ 在项目根目录下创建js文件夹以及app.js文件。
→ 在项目根目录下添加GruntFile.js文件，如下：
module.exports = function(grunt){ grunt.initConfig({ traceur:{ options:{ exprimental: true }, custom:{ files:{ 'build/app.js':"js/**/*.js" } } }, watch:{ files: "js/**/*.js", tasks: "traceur" } }); grunt.loadNpmTasks('grunt-traceur-latest'); grunt.loadNpmTasks('grunt-contrib-watch');}
以上就是说，每当js文件夹及其子文件夹中的js文件有变化，就会使用traceur这个任务，把js及其子文件夹中的js文件编译到build/app.js文件中。
→ 在控制台运行如下命令：
grunt watch
→ 在js/app.js中编写如下并保存
console.log(`${1+1}`);
→ 在build/app.js中自动生成如下
"use strict";var __moduleName = (void 0);console.log(("" + (1 + 1)));
→ 在项目根目录下创建index.html文件并引用build/app.js文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><script src='/images/loading.gif' data-original="node_modules/traceur/bin/traceur-runtime.js"></script><script src='/images/loading.gif' data-original="build/app.js"></script></body></html>
此外，也可以使用www.es6fiddle.net网站编写ES6代码。
原标题：WebStorm中使用ES6的几种方式
关键词：web
我知道了 