如何在 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 ?》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
轻量级Django
茱莉亚·埃尔曼 (Julia Elman)、马克·拉温 (Mark Lavin) / 侯荣涛、吴磊 / 中国电力出版社; 第1版 / 2016-11-1 / 35.6
自Django 创建以来，各种各样的开源社区已经构建了很多Web 框架，比如JavaScript 社区创建的Angular.js 、Ember.js 和Backbone.js 之类面向前端的Web 框架，它们是现代Web 开发中的先驱。Django 从哪里入手来适应这些框架呢？我们如何将客户端MVC 框架整合成为当前的Django 基础架构？ 本书讲述如何利用Django 强大的“自支持”功......一起来看看 《轻量级Django》 这本书的介绍吧!
