寫GULP遇到的ES6問題詳解

Gulp.js 是一個自動化構建工具,開發者可使用它在項目開發過程當中自動執行常見任務。最近複習一下gulp一些基本的寫法,在寫了一些簡單的uglify,rename,concat,clean的處理以後,發現都還記得這些基本語法。前端

而後無心間就想在demo中寫下export function會變成怎樣,結果發現gulp並不支持直接的es6語法,並且提示的錯誤也讓人模棱兩可。es6

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

這着實讓我頭疼了一會,百度後才明白這是解析es6語法錯誤。 因而按照網上說的安裝了gulp-babel,而後配置一個.babelrc的文件,再根據報錯提示安裝了@babel/core,結果發現編譯是不報錯了,可是編輯結果後的文件仍是出不來。npm

gulp.task('miniJS', function(){
         gulp.src(['demo.js', 'demo2.js'])
            .pipe(concat('demoFile.js'))
            .pipe(babel())
            .pipe(gulp.dest('./finalFile/'))
})//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流:864305860
複製代碼

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

官網提示方法:bash

# Babel 7
$ npm install --save-dev gulp-babel @babel/core @babel/preset-env
//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流:864305860 
# Babel 6
$ npm install --save-dev gulp-babel@7 babel-core babel-preset-env
複製代碼

因此gulp-babel版本爲8.0.0的只要安裝如圖的包就行了:babel

"@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
}//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流:864305860
export demoFunc;
複製代碼

這段代碼是生效的,可是babel()好像認定是個解析不出的代碼,不會解析輸出文件,不知道是什麼問題,我也處於懵逼中。 換成以下的方式是能夠的:ui

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

這樣一來uglify就能夠對es6進行解析了:this

.pipe(babel({
    presets: ['@babel/env']
}))//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流:864305860
.pipe(uglify())
.pipe(gulp.dest('file'))
複製代碼

結語

感謝您的觀看,若有不足之處,歡迎批評指正。

相關文章
相關標籤/搜索