写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/'))
})//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: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'))
结语
感谢您的观看,如有不足之处,欢迎批评指正。
原文地址:https://segmentfault.com/a/1190000017312256
写GULP遇到的ES6问题详解的更多相关文章
- es6语法详解
什么是ECMAScript? ECMAScript是浏览器脚本语言的规范,而我们熟知的js语言,如JavaScript则是规范的具体实现.es6就好比Java的jdk. 一.es6语法详解:let声明 ...
- Es6主要特征详解
一.简介 本文将对es6的最佳特性进行分享和讲解.es6也称ES6/ECMAScript2015,在2015年诞生,但是目前实际开发中还很多用的是ES5(2009年),原因就是很多的浏览器不支持新的语 ...
- “makefile”写法详解,一步一步写一个实用的makefile,详解 sed 's,$∗\.o[ :]*,\1.o $@ : ,g' < $@.
目的:编写一个实用的makefile,能自动编译当前目录下所有.c/.cpp源文件,支持二者混合编译.并且当某个.c/.cpp..h或依赖的源文件被修改后,仅重编涉及到的源文件,未涉及的不编译. 二要 ...
- Windows下的Jupyter Notebook 的介绍(写给新手)(图文详解)
不多说,直接上干货! Windows下的Python 3.6.1的下载与安装(适合32bits和64bits)(图文详解) Windows下的Jupyter Notebook 安装与自定义启动(图文详 ...
- 第210天:node、nvm、npm和gulp的安装和使用详解
一.node 1.什么是node? 它不是JS文件,也不是JS框架,而是Server side JavaScript runtime,当服务端的一个JS文件运行时,会被NODE拦截,在NODE中运行J ...
- ES6 Promise 详解
一.概念 Promise,从语法上来讲,它是一个对象,是一个构造函数,可以获取 异步操作 的信息. 简单来讲,就是用同步的方式写异步代码,用来解决回调问题. 二.特点 Promise 对象有两个特点: ...
- gulp的安装以及使用详解,除了详细还是详细
安装gulp: 1. 创建本地包管理环境: 使用npm init命令在本地生成一个package.json文件,package.json是用来记录你当前这个项目依赖了哪些包,以后别人拿到你这个项目后, ...
- ES6 Promise详解
前言 本文主要是对Promise本身的用法做一个全面解析而非它的原理实现,如果你对Promise的用法还不是很熟悉或者想加深你对Promise的理解,我相信这篇文章一定会帮到你. 首先让我们先了解一下 ...
- ES6 modules 详解
概述 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require.Pytho ...
随机推荐
- WebSockets
WebSocket 是为了在一个单独的持久连接上提供全双工的双向通信.有关WebSocket API的内容可以参考这里. 这里简单说明下WebSocket在javascript中的用法. 1 WebS ...
- hue mysql连接不上数据库排查
由于CDH所有的组件都会进行agent检测,所以先到/var/log/cloudera-scm-agent(mysql所在节点进行日志排查),可以发现每次连接会产生一个log路径作为记录hue连接my ...
- 解决windows8.1的依赖
- Mybatis的插件 PageHelper 分页查询使用方法
参考:https://blog.csdn.net/ckc_666/article/details/79257028 Mybatis的一个插件,PageHelper,非常方便mybatis分页查询,国内 ...
- bash: express: command not found及vue连接数据库调接口
今天在使用express -e . 的命令时,cmd给我报了一段不识别的错误: bash: express: command not found ,在网上查了一下,有人指出是express4的版本将命 ...
- vim编辑shell
vi编辑 u撤销 i输入 dd删除游标所在的那一整行(常用) yy复制游标所在的那一行(常用) p 为将已复制的数据在光标下一行贴上 nyy n 为数字.复制光标所在的向下 n 行,例如 20yy ...
- Hadoop Serialization -- hadoop序列化详解 (2)【Text,BytesWritable,NullWritable】
回顾: 回顾序列化,其实原书的结构很清晰,我截图给出书中的章节结构: 序列化最主要的,最底层的是实现writable接口,wiritable规定读和写的游戏规则 (void write(DataOut ...
- 5.appium命令行环境搭建及参数使用
1.安装淘宝npm(cnpm) (1)输入以下命令 :npm install -g cnpm --registry=https://registry.npm.taobao.org (2)输入cnpm ...
- TZOJ 3042 切蛋糕(并查集)
描述 KK是个心灵手巧的好姑娘,她做了一个大蛋糕请她的好朋友们来品尝.这个蛋糕分成n×n个正方形小格,每个小格包含一块水果.KK要把蛋糕切成若干块,显然她不会破坏任意一个小格.无聊的某同学在她切蛋糕时 ...
- 跟我一起做一个vue的小项目(八)
接下来我们进行的是城市选择页面的路由配置 添加city.vue,使其点击城市,然后跳转到city页面 //router.js import Vue from 'vue' import Router f ...