如何在 WebStorm 設定 ECMAScript 2015+ 與 File Watcher ?
栏目: JavaScript · 发布时间: 7年前
内容简介：雖然可以搭配 Webpack 將 ECMAScript 2015+ 編譯成 ES5，但有時只是想簡單學習 ECMAScript 2015+，此時可以透過 WebStorm 內建的 File Watcher，只要 ECMAScript 一存檔，WebStorm 就會自動呼叫 Babel 幫我們編譯成 ES5。macOS High Sierra 10.13.6WebStorm 2018.2.3
雖然可以搭配 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+
- Preferences -> Language & Frameworks -> JavaScript
- JavaScript language version ：
ECMAScript 6
File Watcher
- Preferences -> Tools -> File Watchers
- 按
+新增 File Watcher
- WebStorm 預設提供了很多 File Watcher 設定，選擇
Babel
- 接受預設值即可，按
OK繼續
- 成功新增了 Babel File Watcher
Hello World
- 使用 ECMAScript 2015 語法的
HelloWorld.js
- 只要一存檔，File Watcher 就會啟動 Babel，編譯成 ES5 的
HelloWorld.js
- 使用 Node.js 執行 ES5 版本的
HelloWorld.js
Conclusion
- 由於 ECMAScript 2015+ 需要 transpile，因此很多人卻步，事實上在 WebStorm 只要配合 File Watcher，就會自動呼叫 Babel 編譯，開發體驗與 ES5 完全一樣
Reference
以上所述就是小编给大家介绍的《如何在 WebStorm 設定 ECMAScript 2015+ 與 File Watcher ?》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
电子邮件营销密码
[美] Jeanniey Mullen、David Daniesl / 薛剑韬 / 人民邮电出版社 / 2009-9 / 39.00元
在当今互联网蓬勃发展的形势下，电子邮件是互联网应用最广的服务之一。那么如何利用其作为有效的营销工具呢？本书系统地讲解了美国电子邮件营销的预算统筹、营销策略、管理模式、执行机制、涉及的技术、营销实施的细节等，其方法有很强的可循性，并可预见将获得的成果。阅读本书之后，读者会深刻感受到电子邮件营销的博大精深，它既是一门扎实严谨的科学，又是一项充满创造力的艺术。. 本书适合企业管理人员及市场营销人员......一起来看看 《电子邮件营销密码》 这本书的介绍吧!
