webstrom中如何使用babel?（圖文並茂）

webstrom中如何使用babel?（圖文並茂）

備註：babel版本爲7.4。

吃碼小妖：如下操做已成功。

如下爲操做步驟：

0一、WebStorm如今支持ES2015+，無需安裝任何其餘擴展。

0二、配置babel的官網文檔地址：

blog.jetbrains.com/webstorm/20…

0三、File watcher是一個WebStorm內置工具，容許在文件更改時自動運行一些命令行工具。

對於Babel，WebStorm已預先配置了文件監視器。

0四、安裝babel-cli

npm install --save-dev babel-cli
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

0五、如今轉到首選項| 工具| 文件觀察者，單擊+按鈕（ Preferences | Tools | File watchers），而後從列表中選擇Babel文件觀察器。

指定Babel可執行文件的路徑，而後單擊「肯定」。

默認狀況下，全部擴展名爲.js的文件將在更改時自動使用Babel進行編譯。

在File watcher配置中，檢查Babel的路徑：它應該在項目node_modules文件夾中（例如OS X上的 node_modules/.bin/babel）。

在Windows上，它必須是exe，bat或cmd文件。
全部其餘Watcher設置都是預約義的，所以如今能夠使用了。 使用此默認設置，編譯的文件將位於dist文件夾中。

吃碼小妖截圖：

【】能夠在文件觀察器（File watcher）中修改的設置：

文件類型（File type）

指定觀察者將「監視（watch）」並運行程序的文件類型。若是使用的是文件擴展名.es6或.jsx，請在下拉列表中分別選擇ECMAScript 6或React JSX。

範圍（Scope）

選擇觀察者將「觀察」的範圍。默認狀況下，範圍包括全部項目文件;

可是，可能但願在不觸發觀察者的狀況下排除要編輯的測試文件或其餘一些文件。

能夠在Preferences |中建立新Scope並設置排除規則外觀與行爲|做用域。（ Preferences | Appearance & Behavior | Scopes.）

Program：babel命名位置。

F:devnode_modules.binbabel

參數（Arguments）

能夠在此處指定 Babel CLI的選項。

使用WebStorm中的默認配置，生成的ES5文件和源映射將保存在項目根目錄的dist文件夾中。將保留文件名及其父目錄。

（吃碼小妖：確實如此）

要刷新的輸出路徑 - 在此字段中，您應指定已編譯文件的路徑（能夠是保存文件的目錄或文件自己，用冒號分隔）。 IDE將查看這些路徑以進行外部更改，並確保更改與項目同步。

工做目錄（Working directory）（在工做目錄和環境變量下）

執行程序的目錄。默認狀況下，這是文件的目錄。

0六、最後，在語言和框架 - JavaScript - JavaScript語言版本（Languages & Frameworks - JavaScript - JavaScript language version）中，選擇ECMAScript 6。

0七、建立.babelrc配置文件
在項目根目錄中建立.babelrc配置並啓用一些插件。

npm install @babel/preset-env --save-dev

要啓用預設，必須在.babelrc文件中定義它，以下所示：

{
  "presets": ["@babel/preset-env"]
}