ES6-babel環境搭建

本文轉載自查看原文 2019-12-27 16:36 243 es6運行環境搭建/ babel/ ES6/ es6/ babel環境搭建

作者：小土豆biubiubiu

博客園：www.cnblogs.com/HouJiao/

掘金：https://juejin.im/user/58c61b4361ff4b005d9e894d

簡書：https://www.jianshu.com/u/cb1c3884e6d5

微信公眾號：土豆媽的碎碎念（掃碼關注，一起吸貓，一起聽故事，一起學習前端技術）

碼字不易，點贊鼓勵喲~

　　本篇文章用於記錄如何運行我們編寫的es6代碼，因為關於babel的搭建環境內容較多，因此標題設置為《ES6-babel環境搭建》。

一.瀏覽器

　　目前來說，瀏覽器已經支持部分的ES6/ES7/ES8的語法。以chrome瀏覽器為例，我們寫一個簡單的代碼粘貼到瀏覽器執行：

　　可以看到，執行過程中沒有任何的錯誤，而且打印出正常的結果。該代碼說明chrome已經支持class、箭頭函數這樣的ES6語法，因此我們可以編寫包含這些語法的代碼直接運行在瀏覽器中。

　　然而，不同的瀏覽器對ES6/ES7/ES8的支持度都是不一樣的（上面那段代碼貼到ie中就會報語法錯誤）。這樣辦法不太常用，只適合我們平時練習一下ES6/ES7/ES8的基礎語法。

二.在線編譯器

　　ES6的在線編譯器首選便是babel官方提供的：https://www.babeljs.cn/repl

　　那么我們簡單介紹一下這個界面。

1.settings

　　設置由上至下分別是：

　　　　Evaluate　選中之后沒有什么效果，暫時不知道有什么用。

　　　　Line Wrap 選中此項，編譯器根據代碼編輯可視區的寬度自動進行換行

　　　　Minify 壓縮代碼，選中壓縮代碼后會報錯。

　　　　Prettify 美化代碼，選中此項可以將代碼進行換行和縮進，方便查看結果。看下面的結果，美化前中間兩行代碼在一行展示，美化后均有換行和縮進。

　　　　File Size 文件大小，選中后右下角會顯示

　　　　Time Travel 時間線，選中此項可以看到不同時期的編輯結果。

2.presets

　　preset表示編譯時的預設配置。

　　es2015

　　es2015表示將源代碼中包含es6的語法代碼編譯成es5的語法代碼；

　　es205-loose

　　es2015-loose是es5的loose版本，它也是將es6代碼轉化為es代碼，它和標准版的es2015的區別，我們可以看一下下面的這個對比.

　　源代碼：

　　分別使用es2015和es2015-loose編譯。

　　可以看到，loose版編譯后的代碼更簡潔，代碼量也少了很多。（網上很多說不推薦這個預設）

　　es2016、es2017

　　這兩個預設是將es6逐年新增的特性轉化為es5代碼。

　　stage-x

　　stage-x是es7不同階段提案的新語法的編譯規則。stage-0是stage-1、stage-2和stage-3的一個全集。因此一般想要編譯包含es7語法的代碼，設置stage-0即可。

　　react

　　該預設用於轉化React中的JSX語法

三.本地搭建bebel編譯環境

　　babel的在線編譯雖然很方便，但是有很多的局限性。如果僅僅是為了練習測試es6的一些新語法特性，在線編譯也方便。

　　然而我們在實際的項目開發中，會編寫很多腳本文件，那在線編譯顯然就不合適我們，因為我們不可能把每一個腳本文件粘貼復制到在線編譯器中，然后在將結果粘貼回源文件中。

　　因此本地搭建babel的編譯環境是一個很實用的解決辦法。

　　本地搭建babel的編譯環境，需要安裝babel-cli，這樣我們就能在命令行使用babel提供的一些命令去編譯我們的代碼。

1.創建項目目錄

　　首先我在E:\MyStudy下創建了es6RuntimeEnv這個目錄

2.初始化項目

　　使用npm init 初始化項目

3.安裝babel-cli

　　安裝命令：npm install babel-cli --save-dev

　　bebel-cli2@6.26.0成功安裝

4.安裝babel-core和babel-preset

　　bebel-cli只提供了命令行的一些工具，因此我們還需要安裝核心的編譯器babel-core和babel-preset。babel-preset就是前面在線編譯器中提過的預設。

　　安裝babel-core

　　安裝命令npm install babel-core --save-dev

　　安裝預設

　　　　前面說過preset-es2015可以將es6語法進行編譯，preset-es2016/2017可以將新增的es6語法進行編譯。

　　　　那么現在babel提供了一個預設叫babel-preset-env，這個預設就比較靈活，它可以根據我們的配置，按照需要去選擇preset。

　　　　我們可以選的配置node的版本，瀏覽器的版本等。（默認不配置的情況下，會從es2015依次加載所有的preset）

　　　　因此，本次我們選擇按照babel-preset-env，按照命令為：npm install babel-preset-env --save-dev

5.編寫代碼

　　現在我們編寫一個包含es6語法的代碼

　　counter.js　

/*
*    將兩個數做對應的計算並返回結果
*    使用到的ES6的基本語法有：
*        函數擴展-為函數參數設置默認值
*        模塊導出-export命令
*/
class Counter {
    constructor(x=0,y=0){
        this.x = x;
        this.y = y;
    }
    add(){
        return this.x+this.y;
    }
}

export { Counter };

　　index.js

/*
*    引用counter.js模塊中的函數，傳入參數，打印相加結果
*    使用到的ES6的基本語法有：
*       模塊導入-import命令
*        變量聲明命令-let
*/
import { Counter } from './counter.js'
let a = 100;
let b = 200;
let counter = new Counter(a,b);
let result = counter.add();
console.log("add: a + b = " + result);

　　cli中使用babel編譯的命令為：babel 【目標文件路徑和文件名】 --out-file 【編譯結果路徑和文件名】 --presets【preset配置】（--out-file可以簡寫為-o）

　　本次我們的編譯命令為：babel index.js -o resultOfIndex.js --presets babel-preset-env ，意思就是依次加載es2015/2016等預設，並將當前目錄下的index.js文件編譯到當前目錄下的resultOfIndex.js。

　　備注：由於babel局部安裝，因此需要將可執行腳本文件的路徑添加到環境變量中，本次演示需要添加的路徑為E:\MyStudy\es6RuntimeEnv\node_modules\.bin

　　查看編譯后的結果文件resultOfIndex.js

"use strict";

var _counter = require("./counter.js");

var a = 100; /*
             *    引用counter.js模塊中的函數，傳入參數，打印相加結果
             *    使用到的ES6的基本語法有：
             *       模塊導入-import命令
             *        變量聲明命令-let
             */

var b = 200;
var counter = new _counter.Counter(a, b);
var result = counter.add();
console.log("add: a + b = " + result);

　　然后我們在執行babel counter.js -o resultOfCounter.js --presets babel-preset-env，將counter.js文件進行編譯

　　查看編譯后的resultOfCounter.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"); } }

/*
*    將兩個數做對應的計算並返回結果
*    使用到的ES6的基本語法有：
*        函數擴展-為函數參數設置默認值
*        模塊導出-export命令
*/
var Counter = function () {
    function Counter() {
        var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
        var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

        _classCallCheck(this, Counter);

        this.x = x;
        this.y = y;
    }

    _createClass(Counter, [{
        key: "add",
        value: function add() {
            return this.x + this.y;
        }
    }]);

    return Counter;
}();

exports.Counter = Counter;