记录一下写gulp遇到的ES6问题

栏目: Node.js · 发布时间: 6年前

内容简介:早上复习一下gulp一些基本的写法,在写了一些简单的uglify,rename,concat,clean的处理之后,发现都还记得这些基本语法。然后无意间就想在demo中写下export function会变成怎样,结果发现gulp并不支持直接的es6语法,而且提示的错误也让人模棱两可。这着实让我头疼了一会,百度后才明白这是解析es6语法错误。于是按照网上说的安装了gulp-babel,然后配置一个.babelrc的文件,再根据报错提示安装了@babel/core,结果发现编译是不报错了,但是编辑结果后的文

早上复习一下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'))复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web容量规划的艺术

Web容量规划的艺术

阿尔斯帕瓦 / 叶飞、罗江华 / 机械工业出版社 / 2010-1 / 29.00元

《Web容量规划的艺术》由John Allspaw(F订ickr的工程运营经理)撰写,结合了他个人在F1ickr成长过程中的许多经历和很多其他产业中同行的洞察力。在衡量增长、预测趋势、成本效益等方面,他们的经验都会给你一些可靠并有效的指导。 网站的成功是以使用和增长来衡量的,而且网站类公司的成败(生死)是依赖于他们是否有能力来衡量决定他们的基础结构,从而适应不断增长的需求。作者通过自身实践给......一起来看看 《Web容量规划的艺术》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具