写GULP遇到的ES6问题详解
2018-12-09 11:20:23来源：博客园 阅读 ()
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/'))
})//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
后来索性直接去了gulp-babel官网看，才明白3个月之前gulp-babel进行了更新，而我更新的是最新的gulp-babel包,而我搜索到的解决方法都是很早之前的，自然无法匹配。
官网提示方法：
# Babel 7
$ npm install --save-dev gulp-babel @babel/core @babel/preset-env
//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
# 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
}//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
export demoFunc;
这段代码是生效的，但是babel()好像认定是个解析不出的代码，不会解析输出文件，不知道是什么问题，我也处于懵逼中。
换成如下的方式是可以的：
export function demo(){
console.log('this is the first gulp demo');
}
export var num = {};
这样一来uglify就可以对es6进行解析了：
.pipe(babel({
presets: ['@babel/env']
}))//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
.pipe(uglify())
.pipe(gulp.dest('file'))
结语
感谢您的观看，如有不足之处，欢迎批评指正。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- js防阻塞加载的实现方法 2019-11-15
- 脚本调用样式的方法 2019-10-25
- es6学习笔记（二） 2019-08-14
- Es6常用方法filter 2019-08-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
