Home > Developer > Web Develop
This article summarizes several ways to use ES6 under Webstorm.
The first thing to choose is the version of JavaScript. Click "File", "Settings", "Languages & Frameworks", "JavaScript", and select "ECMAScript6" in "JavaScript Language Version".
Create a file called Calc.js.
class calc{ constructor () { console.log (' Calc constructor '); } Add (b) { return a + B; }} var New Calc (); Console.log (C.add (2, 3));In order to compile the ES6 code into ES5 code, Google's Traceur compiler is required.
Create a index.html page as follows:
<! DOCTYPE html>The downside of this approach is the need to have access to the Https://traceur-compiler.googlecode.com/git/bin/traceur.js file.
Using the traceur command line
→ Global Install traceur, enter in console:
NPM install-g traceur
→ introduce traceur related files into the project and enter them in the console:
NPM Install Traceur
→ Use the traceur command to compile the ES6 version of the Js/calc.js file into a es5 version of the Out/calc5.js file. In console input:
Traceur--out out/calc5.js js/calc.js--exprimental
The following two JS files are referenced in the index.html.Traceur combined with Grunt<script src= "Node_modules/traceur/bin/traceur-runtime.js" ></script><script src= "Out/calc5.js" > </script>
→ recreate a project
→ Click "File", "Settings", "Languages & Frameworks", "JavaScript", and in "JavaScript Language Version ", select" ECMAScript6 ".
→ introduce traceur related files in the project, enter in console:
npm install traceur
→ Make sure the grunt CLI (NPM intstall-g grunt-cli) is installed.
→ Install grunt in the project.
npm Install grunt--save-dev
→ installing the grunt-traceur-latest plugin.
npm Install grunt-traceur-latest--save-dev
→ installing the Grunt-contrib-watch plugin.
npm Install grunt-contrib-watch--save-dev
→ Create the build folder and the App.js file under the project root directory.
→ Create the JS folder and the App.js file in the project root directory.
→ Add the gruntfile.js file under the project root directory, as follows:
function (Grunt) { grunt.initconfig ({ traceur:{ options:{ true }, custom:{ files:{ ' build/app.js ': "Js/**/*.js"}} , watch:{ "Js/**/*.js" , " Traceur " } }); Grunt.loadnpmtasks (' grunt-traceur-latest '); Grunt.loadnpmtasks (' Grunt-contrib-watch ');}That is, whenever the JS folder and its subfolders in the JS file changes, will use traceur this task, JS and its sub-folder JS file compiled into the Build/app.js file.
→ Run the following command on the console:
Grunt Watch
→ Write the following in Js/app.js and saveConsole.log (' ${1+1} ');→ automatically generate the following in Build/app.js
"Use strict"; var __modulename = (void 0); Console.log ("" + (1 + 1));→ Create a index.html file under the project root and reference the Build/app.js file
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title></title></Head><Body><Scriptsrc= "Node_modules/traceur/bin/traceur-runtime.js"></Script><Scriptsrc= "Build/app.js"></Script></Body></HTML>In addition, you can use the Www.es6fiddle.net Web site to write ES6 code.
Several ways to use ES6 in Webstorm
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
