所需基礎

• node.js

• nmp

  
  

開始

1、首先新建一個空項目，減少幹擾更快的看到配置效果。

2、在項目中創建一個 man.js 文件 。

• 進入設置：

  「 File Settings Languages&Frameworks JavaScript 」

  
  

• 將 JavaScript language version 改成 ECMAScript 6 。

  
  

  

  
  

• man.js 中輸入 ES6 代碼，例如：

  
  

var Name = ‘Michael‘;

function multiply(x, y) { 
return x * y; 
};

export { Name, multiply as f1}

3、在根目錄新建一個 package.json 文件，『這一步如果沒有完成，下面的安裝會報錯』。

• 輸入內容：

{
    "name": "test-es6toes5",
    "version": "1.0.0"
}

4、在Terminal中安裝相應的包 。

• npm install --save-dev babel-cli
  npm install --save-dev babel-preset-es2015
  cnpm i babel-preset-env --save-dev

  
  

  

5、添加 File Watchers 。

• 進入設置：

  「 File Settings Tools File Watchers 」

  
  

• 點擊 「+」 號，選擇 「 Bable 」。

  
  

• 修改 「 Program 」 一項為以下內容，「此為 windows 設置，其他操作系統自行選擇相應的 babel 運行文件」：

• 
  

「YourProjectDir」\node_modules\.bin\babel.cmd

例如：C:\MyProject\node_modules\.bin\babel.cmd

6、這樣就設置完成了，man.js 更改後會進行自動編譯，放在項目根目錄 dist 文件夾下。

註意

如果能幫到你，贊我一下唄

End.

本文出自 “範斯特羅夫斯基” 博客，請務必保留此出處http://headlock.blog.51cto.com/2772396/1976432

Pycharm WebStorm 配置 babel 實現自動編譯 ECMAScript6 (es6) 文件