babel進行es6檔編譯案例詳解（附程式碼）

這次帶給大家babel進行es6檔編譯案例詳解（附程式碼），babel進行es6檔編譯的注意事項有哪些，下面就是實戰案例，一起來看一下。

1.babel

babel官方網址

2. 安裝

npm i babel-cli -g

透過上面指令進行babel的安裝,其中i表示安裝install的意思, -g表示安裝到全域

3.使用

建立檔案es6.js

let num = [1,2,3,4]; 
let plusDouble = num.map(item => item * 2); 
console.log(plusDouble);

然後使用指令進行編譯:

babel es6.js -o compiled.js

然後就會在目前目錄下出現編譯之後的文件,就這樣,我們完成了編譯的過程,但是,當我們進行運行編譯之後的文件時,仍然會報錯,其實主要原因是上面的編譯沒有加約束條件,也就是沒有告訴babel去怎麼編譯,那下面我們就進行對babel進行設定

4. 配置

(1)透過檔案配置

在專案目錄下創建文件.babelrc,在文件中書寫如下代碼:,由於babel是通過插件的形式進行使用,所以在下面代碼中通過添加對象預設和插件

{ 
 "presets": [], 
 "plugins": [] 
}

安裝插件,在下面這個插件的使用,可以將ES6程式碼編譯為ES5程式碼:

npm i --save-dev babel-preset-es2015

(程式碼中--save-dev代表安裝在本機開發依賴中)

然後將.babelrc中的檔案進行修改為以下內容: 

{ 
 "presets": ["es2015"], 
 "plugins": [] 
}

至此,我們已經配置完成,運行編譯命令即可得到下面的結果: 

"use strict";  
var num = [1, 2, 3, 4]; 
var plusDouble = num.map(function (item) { 
 return item * 2; 
}); 
console.log(plusDouble);

運行之後能夠正常打印結果

現在我們能夠進行簡單的編譯,但是對於一些es7裡邊的新特性還是有點限制,這樣,我們就的使用插件進行編譯,如下面所示對象展開符插件object-rest-spread,同樣的,我們使用指令進行安裝

npm i babel-plugin-transform-object-rest-spread --save-dev

同樣進行到插件中修改

{ 
 "presets": ["es2015"], 
 "plugins": ["transform-object-rest-spread"] 
}

然後透過程式碼進行測試,在程式碼中書寫如下內容(...為ES7中預先提出的設想):

let courses = { name: 'english', score: 90}; 
courses = { ...courses, comment: 'A'}; 
console.log(courses);

編譯之後的結果為:

'use strict';  
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };  
var courses = { name: 'english', score: 90 }; 
courses = _extends({}, courses, { comment: 'A' }); 
console.log(courses);

透過新增_extends方法將物件展開符轉換,執行程式碼可正常輸出結果

(2)透過在webpack設定檔中進行其他屬性的載入設定

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何使用js統計頁面標籤數量

#如何在微信小程式內開發驗證碼密碼輸入框功能

以上是babel進行es6檔編譯案例詳解（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！