最近用PHPstorm 寫了點es6的語法的東西, what ? 編輯器報錯了

查了查, 原來把編輯器設置一下,就可以了,

Preferences > Languages & Frameworks > JavaScript

然后,運行代碼, what? 又報錯了…

看來我們需要自動轉碼為Es5,不然還不行.

Babel是一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5代碼，從而在瀏覽器或其他環境執行。這意味著，你可以用ES6的方式編寫程序，又不用擔心現有環境是否支持。

而且你還希望每次修改代碼時能自動轉碼，所以還要用到編輯器的file watcher(當然還有其他解決方案)

在根目錄新建一個package.json

{

"name": "hello",

"version": "1.0.0",

}

1

2

3

4

{

"name":"hello",

"version":"1.0.0",

}

然后 npm install -g babel

安裝babel

Preferences > Tools > File watchers

File Type：配置該監聽器監聽的文件類型，可以在Preferences > Editor > File types中配置

Scope：配置該監聽器的監聽范圍，可自定義新的范圍，也可以使用Preferences > Appearance & Behavior > Scopes

Program：babel的安裝位置

Arguments：命令執行參數，參見Babel CLI

Working directory：babel命令執行的位置，默認為文件所在目錄

但是還沒搞定！現在只是搞定了自動轉換的功能，系統默認把ES6 compile成了ES6..(你應該會發現compile出來的東西跟原來的一樣..Generator函數并沒有被轉換成ES5的格式)

所以我們需要安裝Babel的preset以正確識別ES6代碼；和剛才一樣，在npm安裝babel的ES6的preset

npm install --save-dev babel-preset-es2015

在根目錄下新建一個.babelrc文件(就是babel在當前項目的配置文件)，寫上

{

"presets": [

"es2015"

]

}

1

2

3

4

5

{

"presets":[

"es2015"

]

}

OK搞定！保存再回去看一下main-compiled.js 應該就變成這個樣子啦，現在你在main.js里直接寫ES6代碼，IDE都會自動compile成ES5的代碼在這里啦～

這樣對文件做修改會隨時生成編譯成ES5的文件以及sourceMap文件

function he(a=1,b=2) {

console.log(123);

}

1

2

3

functionhe(a=1,b=2){

console.log(123);

}

編譯后

"use strict";

function he() {

var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;

var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;

console.log(123);

}

//# sourceMappingURL=c.js.map

1

2

3

4

5

6

7

8

9

"use strict";

functionhe(){

vara=arguments.length>0&&arguments[0]!==undefined?arguments[0]:1;

varb=arguments.length>1&&arguments[1]!==undefined?arguments[1]:2;

console.log(123);

}

//# sourceMappingURL=c.js.map

大功告成!

總結

以上是生活随笔為你收集整理的php es6写法,Web/PHPStorm ES6 语法支持以及实时编译的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。