你的位置:首页 > 软件开发 > Java > WebStorm中使用ES6的几种方式

WebStorm中使用ES6的几种方式

发布时间:2015-11-26 12:00:36
本篇总结几种在WebStorm下使用ES6的方式。首先要选择Javascript的版本。依次点击"File","Settings","Languages & Frameworks","Javascrip ...

 

本篇总结几种在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));
创建一个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>

使用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>
→ 重新创建一个项目→ 依次点击"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');}
→ 在控制台运行如下命令:grunt watch→ 在js/app.js中编写如下并保存

 

console.log(`${1+1}`);

原标题:WebStorm中使用ES6的几种方式

关键词:web

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。