WebStorm使用ES6
生活随笔
收集整理的這篇文章主要介紹了
WebStorm使用ES6
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
創建項目es6demo
右鍵單擊項目，在彈出式菜單中選擇創建文件package.json
安裝babel-cli
npm insall --save-dev babel-cli
安裝轉換器babel-preset-es2015
npm install --save-dev babel-preset-es2015
package.json
{"name": "application-name","version": "0.0.1","devDependencies": {"babel-cli": "^6.23.0","babel-preset-es2015": "^6.22.0" } }創建配置文件.babelrc
{"presets": ["es2015"] }創建hello.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title></head> <body> <script src='./dist/hello.js'></script> </body> </html>創建hello.js (ES6版本)
class Greeter {constructor(greeting) {this.greeting = greeting;}greet() {return "<h1>" + this.greeting + "</h1>";} } ; var greeter = new Greeter("Hello, world!"); document.body.innerHTML = greeter.greet();配置WebStorm
支持es6
配置js文件變化自動調用babel生成es2015代碼
Program:?E:\es6demo\node_modules\.bin\babel.cmd
Arguments:?$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps ?--presets es2015
Output paths to refresh:?dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js.map
最終項目結構如下
運行效果
總結
以上是生活随笔為你收集整理的WebStorm使用ES6的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WebStorm使用TypeScript
- 下一篇： 用Gogland开发Go程序