写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插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
详解javascript new的运行机制
Jan 26 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 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 MYSQL中插入当前时间
2008/04/06 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
iview table高度动态设置方法
2018/03/14 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
python输出带颜色字体实例方法
2019/09/01 Python
python实现静态服务器
2019/09/05 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
基于Python实现天天酷跑功能
2021/01/06 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
软件测试企业面试试卷
2016/07/13 面试题
制冷与电控专业应届生求职信
2013/11/11 职场文书
大四自我鉴定
2014/02/08 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
承诺书范本
2015/01/21 职场文书
演讲开场白和结束语
2015/05/29 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书