webstorm bable

1、設置npm源

1.獲得本來的鏡像地址

npm get registry 

> https://registry.npmjs.org/

設成淘寶的

npm config set registry http://registry.npm.taobao.org/

 

 

2.換成原來的

npm config set registry https://registry.npmjs.org/

2、Bable

1.在webstorm中建立項目.

2.在項目的根目錄下建立package.json  

 

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

 

 

3.打開webstorm的Terminal (快捷鍵alt+f12)，安裝babel-cli.(須要先安裝node.js)

    

npm install --save-dev babel-cli

 

 

4.File-->Settings-->Languages&Frameworks-->JavaScript    JavaScript language version 選擇ECMAScript 6.

5.File-->Settings-->Tools-->Files Watchers 中加上Babel

6.將Files Watchers 中 Babel 中的Program 改成$ProjectFileDir$\node_modules\.bin\babel.cmd   (windows中)

7.在Terminal中，安裝babel的ES6的preset

   npm install --save-dev babel-preset-es2015

8.在根目錄下新建一個.babelrc文件（就是babel在當前項目的配置文件），我建立的是babel.babelrc

 

 {
  "presets": [
    "es2015"
  ]
}

 

 

9.ok

 

 

備註：我在項目中將Files Watchers 中 Babel 中

            File type：JavaScript 

                               更改成 

                              JSX Harmony

            Arguments：--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$

                                    更改成

                                    --source-maps --out-file $FileNameWithoutExtension$.js --presets es2015 $FilePath$

            Output paths to refresh ：$FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$-compiled.js.map

                                                           更改成

                                                           $FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map

 

或者  

 

 

第一種：簡單粗暴型，全部語法轉譯成es5

1. npm安裝babel

   npm install -g babel-cli

2.npm安裝Babel的preset

npm install --save-dev babel-preset-es2015

3 工程路徑新建.babelrc文件，內容以下

{
  "presets": [
    "es2015"
  ]
}

4 打開Preference->Tools->File Watcher->Babel,
如何沒有，就點擊下面+號，選擇新建

Paste_Image.png

5 雙擊打開Babel，進行配置
重點是Watcher Seetings參數：

• Arguments:--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$

6 這樣就完成了自動轉換js的配置，新建aa.js文件測試，以下圖,自動生成aa-compiled.js文件，這個文件就是轉譯後的文件：

Paste_Image.png

轉換效果如何呢？aa.js內容

export default class A{

  constructor(){
    this.aa = 1;
    this.bb = 2;
  }
  test(){

  }
}

aa-compiled.js內容：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/**
 * Created by cly on 2017/4/26.
 */
var A = function () {
  function A() {
    _classCallCheck(this, A);

    this.aa = 1;
    this.bb = 2;
  }

  _createClass(A, [{
    key: "test",
    value: function test() {}
  }]);

  return A;
}();

exports.default = A;

//# sourceMappingURL=aa-compiled.js.map

第二種：精細劃分型，僅僅把不支持import,export的語法進行es5轉譯

第一種轉譯咱們會發現一個問題，就是全部語法全變成了es5,調試時還得在es6，es5之間切換，簡直要精神分裂了呀，有木有！這樣咱們直接用es5寫不就行了嗎！
有沒有方法，只轉譯nodejs如今不支持的語法呢，據我所知，最新版node.js的v7.8版本，除了export,import這些module依賴之外的語法，都完美支持了es6，未來v8,v9妥妥的完美兼容的節奏。那咱們是否是隻引入module依賴模塊的轉譯規則，是否是就搞定問題了？

查看babel官網,能夠找到以下圖

Paste_Image.png

點擊進入就是隻安裝common js插件的方法
1 npm安裝

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

2 修改.babelrc文件，改成以下：

// without options
{
  "plugins": ["transform-es2015-modules-commonjs"]
}

//或者 
//with options
{
  "plugins": [
    ["transform-es2015-modules-commonjs", {
      "allowTopLevelThis": true
    }]
  ]
}

2 修改打開Preference->Tools->File Watcher->Babel,修改Arguments參數的
--presets es2015 爲 -- plugins transform-es2015-modules-commonjs
3 新建bb.js測試，跟aa.js的結構同樣。
bb.js內容

export default class B{

  constructor(){
    this.aa = 1;
    this.bb = 2;
  }
  test(){

  }
}

轉譯後的bb-compiled.js內容

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
/**
 * Created by cly on 2017/4/26.
 */
class B {

  constructor() {
    this.aa = 1;
    this.bb = 2;
  }
  test() {}
}
exports.default = B;

//# sourceMappingURL=bb-compiled.js.map

是否是很簡單，快嘗試一下吧！

參考文獻

WebStorm配置Babel編譯環境
[nodejs v6+ 不兼容 ES6 import/export 優雅解決方法]

遇到的問題：一直提示出錯，則只要升級到最新版本的webstorm

首先在webstorm的file watcher中添加babel，配置以下:

以後在src目錄下創建一個JS文件，報以下錯誤：

21:13:02 An exception occurred while executing watcher 'Babel'. Watcher has been disabled. Fix it.: Cannot run program "cmd.exe" (in directory "D:\WebStorm_workspace\Study-ES6\src\static"): CreateProcess error=2, 系統找不到指定的文件。

而在命令行進行babel操做都是能夠的，以下圖：

請問這是爲何？

另外這裏還有一個問題，個人babel-preset-es2015和babel-cli都沒有進行全局安裝(爲了可移植性)，都是安裝在項目根目錄下的，這樣形成了一個問題，由於要進行命令行操做，我直接在項目目錄下是不行的，由於根本就沒有babel.cmd這個文件，因此我把node_modules/.bin目錄下的babel.cmd文件複製了一份到項目根目錄下，並將裏面的"%~dp0\..\babel-cli\bin\babel.js" %*改成了"%~dp0\node_modules\babel-cli\bin\babel.js" %*，這樣才能確保在項目根目錄下能執行babel命令，若是不這樣，那麼我要切換到node_modules/.bin目錄下才能執行babel命令。我總感受這裏怪怪的，是否是姿式沒對，還望你們指點指點

翻遍了google，在webstorm的官方論壇裏也搜索遍了，都沒有找到答案，最後是這麼解決的：

由於咱們知道，webstorm他也是用命令行去執行babel命令，以前我發現webstorm的terminal打開會報錯，可是沒有太注意，我只是把這個錯誤記錄了下來，放到瀏覽器裏面開了一個google標籤頁，就沒有管了，由於一直在想babel的問題，心想以後再來解決（實際上是由於我先大概搜索了一下沒有找到答案）。

在2，3個小時的搜索無解後，我開始想，應該和這個有很大的關係，因而繼續搜索，仍是無解，想着直接提issue了，可是回覆可能要等幾天，忽然發現，個人webstorm是2016.1版本，他一直提示我更新，會不會和這個有關係，因而乎立馬更新，而後破解，打開了發現terminal正常了。。。

而後操做和之前徹底如出一轍，此次babel就能用了，這也印證了以前的結論，"webstorm他也是用命令行去執行babel命令"，因此你必須確保它的terminal能正常使用。OK，忙活了2，3個小時也算是解決了問題，沒有白費。