写gulp遇到的ES6问题详解
前言
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。最近复习一下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'))
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
在本文中，我们将创建自定义函数，借助不同示例的默认字符串方法，在我们想要的任何位置替换或更改字符串中的字符，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2023-07-07
这篇文章主要帮助大家轻松掌握JavaScript状态模式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了微信小程序实现卡片左右滑动效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了详解ES6语法之可迭代协议和迭代器协议,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要给大家介绍了关于three.js如何实现3D动态文字效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
js 将input框中的输入自动转化成半角大写（税号输入框）
本文主要介绍了税号输入框：将input框中的输入自动转化成半角大写的方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
ES6：全称ECMAScript 6.0，是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。今天我们就来学习一下ES6的Set集合的使用2023-02-02
JavaScript中你不得不知道的Promise高级用法分享
在JavaScript中,Promise是一种解决异步编程问题的重要方式,本文主要来和大家探讨一下23个Promise的高级用法,每一个都在JavaScript的海洋中航行,让开发者们能够以更高效、优雅的方式处理异步操作,希望对大就有所帮助2023-12-12
这篇文章主要为大家详细介绍了bootstrap suggest js下拉框的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要为大家详细介绍了如何使用svg实现动态时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
最新评论