写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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
js实现京东轮播图效果
Jun 30 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
使用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与mysqli的区别分析
2013/06/10 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
PHP常用的三种设计模式
2017/02/17 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
繁简字转换功能
2006/07/19 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
解释&&和||在javascript中的另类用法
2014/07/28 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
python 字符串和整数的转换方法
2018/06/25 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python实现烟花小程序
2019/01/30 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
Python内置函数及功能简介汇总
2020/10/13 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
幼儿园老师寄语
2014/04/03 职场文书
学校评语大全
2014/05/06 职场文书
有关爱国演讲稿
2014/05/07 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
消夏晚会主持词
2015/06/30 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
详细了解java监听器和过滤器
2021/07/09 Java/Android