記錄一下寫gulp遇到的ES6問題
早上覆習一下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'))複製程式碼