Babel 是一個 JavaScript 編譯器本文

本文介紹如何將babel配置到vs Code中，並且邊寫ES6，邊編譯為ES5，實時檢視。

比如我先建一個express專案，普通專案也OK：

第一步：安裝 babel-cli

cd進入專案根目錄,執行命令： npm install babel-cli --save-dev

// npm一次性安裝多個依賴模組，模組之間用空格隔開
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

第二步：安裝轉碼規則：

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

第三步：安裝完成之後，再建立配置檔案 .babelrc這個檔案，得放在專案根目錄下，presets欄位設定的就是轉碼規則：

{

    "presets":["env"]

}

然後就可以測試了：

在專案根目錄下建立1.js

class Point{
    constructor(x,y){
         this.x = x;
         this.y = y;
    }
    toString(){
        return "(" + this.x + "," + this.y + ")";
    }
}
 let p = new Point(1,2);
 console.log ( p.toString() );
 console.log(Point.name + "..............................................");
 let p2 = new Point();
 p2.x = 'x2';
 p2.y = 'y2';
 console.log(p2.toString());
 

因為我們現在是將babel安裝到了當前目錄下，所以不能直接在終端中babel轉換命令，得使用npm來執行，所以先在packge.json中編寫：

"scripts": {
    "start": "node ./bin/www",
    "build": "babel 1.js -o build.js -w"
  }

// 編譯1.js檔案，-o表示輸出到build.js中 ，-w代表實時編譯，一儲存就立馬編譯並且寫回到build.js檔案中

在VS CODE 中可以講檢視調整為下圖所示，左邊邊寫ES6程式碼，儲存檔案，右邊實時編譯。

進入根目錄，npm run build執行，檢視結果：