Several ways to use ES6 in Webstorm

Source: Internet
Author: User

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.


Inserting the Traceur compiler into a Web page



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.

<script src= "Node_modules/traceur/bin/traceur-runtime.js" ></script><script src= "Out/calc5.js" > </script>

Traceur combined with Grunt



→ 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 save

Console.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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.