符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章给大家分享的是有关如何解决写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'))
感谢各位的阅读!关于“如何解决写gulp遇到的ES6问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!