如何解決寫gulp遇到的ES6問(wèn)題

這篇文章給大家分享的是有關(guān)如何解決寫gulp遇到的ES6問(wèn)題的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括單縣網(wǎng)站建設(shè)、單縣網(wǎng)站制作、單縣網(wǎng)頁(yè)制作以及單縣網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，單縣網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到單縣省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

前言

Gulp.js 是一個(gè)自動(dòng)化構(gòu)建工具,開(kāi)發(fā)者可以使用它在項(xiàng)目開(kāi)發(fā)過(guò)程中自動(dòng)執(zhí)行常見(jiàn)任務(wù)。最近復(fù)習(xí)一下gulp一些基本的寫法，在寫了一些簡(jiǎn)單的uglify,rename,concat,clean的處理之后，發(fā)現(xiàn)都還記得這些基本語(yǔ)法。然后無(wú)意間就想在demo中寫下export function會(huì)變成怎樣，結(jié)果發(fā)現(xiàn)gulp并不支持直接的es6語(yǔ)法，而且提示的錯(cuò)誤也讓人模棱兩可。

events.js:182
 throw er; // Unhandled 'error' event
 ^
GulpUglifyError: unable to minify JavaScript

這著實(shí)讓我頭疼了一會(huì)，百度后才明白這是解析es6語(yǔ)法錯(cuò)誤。

于是按照網(wǎng)上說(shuō)的安裝了gulp-babel,然后配置一個(gè).babelrc的文件，再根據(jù)報(bào)錯(cuò)提示安裝了@babel/core，結(jié)果發(fā)現(xiàn)編譯是不報(bào)錯(cuò)了，但是編輯結(jié)果后的文件還是出不來(lái)。

gulp.task('miniJS', function(){
		 gulp.src(['demo.js', 'demo2.js'])
		 	.pipe(concat('demoFile.js'))
			.pipe(babel())
			.pipe(gulp.dest('./finalFile/'))
})

后來(lái)索性直接去了gulp-babel官網(wǎng)看，才明白3個(gè)月之前gulp-babel進(jìn)行了更新，而我更新的是最新的gulp-babel包,而我搜索到的解決方法都是很早之前的，自然無(wú)法匹配。

官網(wǎng)提示方法：

# Babel 7
$ npm install --save-dev gulp-babel @babel/core @babel/preset-env

# Babel 6
$ npm install --save-dev gulp-babel@7 babel-core babel-preset-env

所以gulp-babel版本為8.0.0的只要安裝如圖的包就好了：

"@babel/core": "^7.1.6",
 "gulp-babel": "^8.0.0",
"@babel/preset-env": "^7.1.6",

這個(gè) @babel/preset-env 包就算沒(méi)有安裝也并不會(huì)報(bào)錯(cuò)確實(shí)是坑，安裝好需要的包后根據(jù)官網(wǎng)給的樣例：

.pipe(babel({ 
   presets: ['@babel/env']  
  }))

同時(shí)需要去除掉創(chuàng)建的.babelrc文件，好像兩者會(huì)有沖突，.babelrc文件存在的同時(shí)導(dǎo)致不會(huì)輸出編譯后的文件。這樣一來(lái)export關(guān)鍵字就有用武之地了，但是在es6中

function demoFunc(){
 //something
}
export demoFunc;

這段代碼是生效的，但是babel()好像認(rèn)定是個(gè)解析不出的代碼，不會(huì)解析輸出文件，不知道是什么問(wèn)題，我也處于懵逼中。

換成如下的方式是可以的：

export function demo(){
	console.log('this is the first gulp demo');
}
 export var num = {};

這樣一來(lái)uglify就可以對(duì)es6進(jìn)行解析了：

.pipe(babel({
	presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('file'))

感謝各位的閱讀！關(guān)于“如何解決寫gulp遇到的ES6問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站標(biāo)題：如何解決寫gulp遇到的ES6問(wèn)題
新聞來(lái)源：http://www.muchs.cn/article10/jdocdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、商城網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、、企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容