記錄一下寫gulp遇到的ES6問題

黑布發表於2018-12-01

早上覆習一下gulp一些基本的寫法，在寫了一些簡單的uglify,rename,concat,clean的處理之後，發現都還記得這些基本語法。然後無意間就想在demo中寫下export function會變成怎樣，結果發現gulp並不支援直接的es6語法，而且提示的錯誤也讓人模稜兩可。

events.js:182
      throw er; // Unhandled 'error' event
      ^
GulpUglifyError: unable to minify JavaScript
複製程式碼

這著實讓我頭疼了一會，百度後才明白這是解析es6語法錯誤。

於是按照網上說的安裝了gulp-babel,然後配置一個.babelrc的檔案，再根據報錯提示安裝了@babel/core，結果發現編譯是不報錯了，但是編輯結果後的檔案還是出不來。

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

後來索性直接去了gulp-babel官網看，才明白3個月之前gulp-babel進行了更新，而我更新的是最新的gulp-babel包,而我搜尋到的解決方法都是很早之前的，自然無法匹配。官網提示方法：

# 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",
複製程式碼

這個@babel/preset-env 包就算沒有安裝也並不會報錯確實是坑，安裝好需要的包後根據官網給的樣例：

.pipe(babel({ 
           presets: ['@babel/env']       
     }))複製程式碼

同時需要去除掉建立的.babelrc檔案，好像兩者會有衝突，.babelrc檔案存在的同時導致不會輸出編譯後的檔案。這樣一來export關鍵字就有用武之地了，但是在es6中

function demoFunc(){
    //something
}
export demoFunc;複製程式碼

這段程式碼是生效的，但是babel()好像認定是個解析不出的程式碼，不會解析輸出檔案，不知道是什麼問題，我也處於懵逼中。換成如下的方式是可以的：

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

這樣一來uglify就可以對es6進行解析了：

.pipe(babel({
	presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('file'))複製程式碼


相關文章