快捷導(dǎo)航

詳解如何使用babel進(jìn)行es6文件的編譯

更新時(shí)間：2018年05月29日 14:29:15 作者：suwu150

這篇文章主要介紹了詳解如何使用babel進(jìn)行es6文件的編譯，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1.babel

2. 安裝

npm i babel-cli -g

通過(guò)上面命令進(jìn)行babel的安裝,其中i表示安裝install的意思, -g表示安裝到全局

3.使用

創(chuàng)建文件es6.js

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

然后使用命令進(jìn)行編譯:

babel es6.js -o compiled.js

然后就會(huì)在當(dāng)前目錄下出現(xiàn)編譯之后的文件,就這樣,我們完成了編譯的過(guò)程,但是,當(dāng)我們進(jìn)行運(yùn)行編譯之后的文件時(shí),仍然會(huì)報(bào)錯(cuò),其實(shí)主要原因是上面的編譯沒(méi)有加約束條件,也就是沒(méi)有告訴babel去怎么編譯,那下面我們就進(jìn)行對(duì)babel進(jìn)行配置

4. 配置

(1)通過(guò)文件配置

在項(xiàng)目目錄下創(chuàng)建文件.babelrc,在文件中書寫如下代碼:,由于babel是通過(guò)插件的形式進(jìn)行使用,所以在下面代碼中通過(guò)添加對(duì)象預(yù)設(shè)和插件

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

安裝插件,在下面這個(gè)插件的使用,可以將ES6代碼編譯為ES5代碼:

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

(代碼中--save-dev代表安裝在本地開(kāi)發(fā)依賴中)

然后將.babelrc中的文件進(jìn)行修改為以下內(nèi)容:

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

至此,我們已經(jīng)配置完成,運(yùn)行編譯命令即可得到下面的結(jié)果:

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

運(yùn)行之后能夠正常打印結(jié)果

現(xiàn)在我們能夠進(jìn)行簡(jiǎn)單的編譯,但是對(duì)于一些es7里邊的新特性還是有點(diǎn)限制,這樣,我們就的使用插件進(jìn)行編譯,如下面所示對(duì)象展開(kāi)符插件object-rest-spread,同樣的,我們使用命令進(jìn)行安裝

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

同樣進(jìn)行到插件中修改

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

然后通過(guò)代碼進(jìn)行測(cè)試,在代碼中書寫如下內(nèi)容(...為ES7中預(yù)先提出的設(shè)想):

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

編譯之后的結(jié)果為:

'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);

通過(guò)添加_extends方法將對(duì)象展開(kāi)符進(jìn)行轉(zhuǎn)化,運(yùn)行代碼可正常輸出結(jié)果

(2)通過(guò)在webpack配置文件中進(jìn)行其他屬性的加載配置

在webpack中,我們能夠通過(guò)各類加載器進(jìn)行樣式的加載,在使用樣式加載的時(shí)候,通過(guò)下面鏈接進(jìn)行查看:http://m.fzitv.net/article/141096.htm

以上就是babel編譯es6文件的方法，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: