如何在 WebStorm 設定 ECMAScript 2015+ 與 File Watcher ?

雖然可以搭配 Webpack 將 ECMAScript 2015+ 編譯成 ES5，但有時只是想簡單學習 ECMAScript 2015+，此時可以透過 WebStorm 內建的 File Watcher，只要 ECMAScript 一存檔，WebStorm 就會自動呼叫 Babel 幫我們編譯成 ES5。

Version

macOS High Sierra 10.13.6

WebStorm 2018.2.3

Babel CLI 6.26.0

Babel-preset-env 1.7.0

Babel CLI

$ yarn global add babel-cli

WebStorm 必須依賴 Babel 才能將 ECMAScript 2015+ 編譯，因此必須先安裝 transpiler。

以 global 方式安裝 bable-cli 。

建立專案

Empty Project

Babel-preset-env

$ yarn add babel-preset-env

Babel CLI 只是包含 transpiler，但 ECMAScript 每年都有新的語言定義，因此要另外安裝 Babel-preset-env。

將 babel-preset-env 安裝在專案目錄下。

支援 ECMAScript 2015+

1. Preferences -> Language & Frameworks -> JavaScript
2. JavaScript language version ： ECMAScript 6

File Watcher

1. Preferences -> Tools -> File Watchers
2. 按 + 新增 File Watcher

1. WebStorm 預設提供了很多 File Watcher 設定，選擇 Babel

1. 接受預設值即可，按 OK 繼續

1. 成功新增了 Babel File Watcher

Hello World

1. 使用 ECMAScript 2015 語法的 HelloWorld.js

1. 只要一存檔，File Watcher 就會啟動 Babel，編譯成 ES5 的 HelloWorld.js

1. 使用 Node.js 執行 ES5 版本的 HelloWorld.js

Conclusion

• 由於 ECMAScript 2015+ 需要 transpile，因此很多人卻步，事實上在 WebStorm 只要配合 File Watcher，就會自動呼叫 Babel 編譯，開發體驗與 ES5 完全一樣

Reference

WebStorm Blog , ECMAScript 6 in WebStorm: Transpiling