WebStorm中使用ES6的几种方式

本篇总结几种在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>