写gulp遇到的ES6问题详解


Posted in Javascript onDecember 03, 2018

前言

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'))

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery常见开发技巧详细整理
Jan 02 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 #Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 #Javascript
koa2实现登录注册功能的示例代码
Dec 03 #Javascript
react-router 路由切换动画的实现示例
Dec 03 #Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 #Javascript
ng-zorro-antd 入门初体验
Dec 03 #Javascript
如何使用 vue + d3 画一棵树
Dec 03 #Javascript
You might like
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
php实现简单加入购物车功能
2017/03/07 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python IP地址转整数
2020/11/20 Python
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
采购部岗位职责
2013/11/24 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
商场促销活动方案
2014/02/08 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
详解Python牛顿插值法
2021/05/11 Python
Python合并多张图片成PDF
2021/06/09 Python
python使用torch随机初始化参数
2022/03/22 Python