本篇總結幾種在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="https://traceur-compiler.googlecode.com/git/bin/traceur.js"
type="text/javascript"></script>
<script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"
type="text/javascript"></script>
<script>
traceur.options.experimental = true;
</script>
<script type="module" src="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="node_modules/traceur/bin/traceur-runtime.js"></script> <script src="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="node_modules/traceur/bin/traceur-runtime.js"></script> <script src="build/app.js"></script> </body> </html>
此外，也可以使用www.es6fiddle.net網站編寫ES6代碼。