写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 ...
随机推荐
- Activiti流程实例管理
1.启动流程 在完成了流程定义部署后,就要启动流程实例了. /** * 1 启动流程 * 当流程到达一个节点时,会在act_ru_execution表中产生1条数据 * 如果当前节点是用户任务节点,这 ...
- [Swoole系列入门教程 4] 定时器与心跳demo
- mysql兼容性语句
SHOW /*!50 GLOBAL */ STATUS SHOW /*!500 GLOBAL */ STATUS SHOW /*!5000 GLOBAL */ STATUS 都报错,必须是 SHOW ...
- centos 安装系列
装coreseek https://www.jb51.net/os/RedHat/462185.html 卸载mysql https://www.cnblogs.com/cyl048/p/687908 ...
- SQL有意思的面试题
1.中软国际 SQL行转列 变成 --数据准备create table t_test( year int, month int, sale int, primary key (year, mon ...
- 从web.xml入手分析jeecms配置文件
web.xml文件是web系统的核心配置文件,里面的所有配置都会加载的运行时的web容器,从她可以了解到整个web项目的配置情况.jeecms的所有配置文件都在config文件夹下面,通过web. ...
- 装配SpringBean(四)--注解装配之组件扫描
前两篇文章我总结了通过XML方式装配bean的实现方式,虽然比较简单,但是需要配置很多,很多时候我们都会使用注解进行装配.使用注解的方式可以减少XML的配置,既能实现XML的功能,还提供了自动装配功能 ...
- PAT甲级——A1028 List Sorting
Excel can sort records according to any column. Now you are supposed to imitate this function. Input ...
- java基础之单例模式
单列模式: 单例模式指的是一个类只能有一个实例,这样的类被称为单例类,或者单态类,即Singleton Class 单例类的特点 单例类只可有一个实例 它必须自己创立这唯一的一个实例 它必须给所有其它 ...
- 详解Spring MVC 4常用的那些注解
Spring从2.5版本开始在编程中引入注解,用户可以使用@RequestMapping, @RequestParam, @ModelAttribute等等这样类似的注解.到目前为止,Spring的版 ...