gulp+babel 实时转es6
1.安装gulp
npm install gulp
2.得到package.json文件
npm init
2.全局安装Babel。
npm install -g babel-cli
npm install -g babel-cli --save-dev
3.Babel的配置文件是.babelrc ,windows下新建该文件会提示必须键入文件名,解决办法是文件名如下.babelrc.
4.ES2015转码规则
npm install --save-dev babel-preset-es2015
5.将规则加入到.babelrc文件中
{
"presets": [
"es2015"
],
"plugins": []
}
6.配置工具
6.1 安装gulp-babel
npm install --save-dev gulp-babel
6.2 配置gulpfile.js文件
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("src/a.js")
.pipe(babel())
.pipe(gulp.dest("lib"));
});
6.3实时转码
安装gulp-watch
npm install --save-dev gulp-watch
配置gulpfile文件
var gulp = require("gulp"),
babel = require("gulp-babel"),
watch = require("gulp-watch");
gulp.task("babeljs", function () {
return gulp.src("www/js/*.js")
.pipe(babel())
.pipe(gulp.dest("dist/js"));
});
gulp.task("watch",function(){
gulp.watch('www/js/*.js',['babeljs']);
})
gulp.task('default',['watch','babeljs']);
7.配置完成,运行实现转码
gulp
gulp+babel 实时转es6的更多相关文章
- 使用gulp和bable实现实时编译ES6代码
这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...
- gulp+Babel 搭建ES6环境
Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了Jav ...
- 让浏览器兼容ES6语法(gulp+babel)
使用gulp+babel搭建ES6环境 前言 我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天 ...
- Babel下的ES6兼容性与规范
前端开发 Babel下的ES6兼容性与规范 ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...
- gulp + gulp-better-rollup + rollup 构建 ES6 开发环境
gulp + gulp-better-rollup + rollup 构建 ES6 开发环境 关于 Gulp 就不过多啰嗦了.常用的 js 模块打包工具主要有 webpack.rollup 和 bro ...
- 关于webpack,babel,以及es6和commonJS之间的联系(转)
add by zhj: babel是将es6转为es5,而webpack从名字也能看出来,是一个打包工具,根据文件之间的依赖关系,将文件进行打包 原文:https://blog.csdn.net/a2 ...
- ES6转ES5:Gulp+Babel
目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使 ...
- ES6 初体验 —— gulp+Babel 搭建ES6环境
ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做.最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用E ...
- Gulp Babel AMD转换例子
1.gulpfile.js var gulp = require('gulp'); const babel = require('gulp-babel'); gulp.task('default', ...
随机推荐
- python元组数据类型讲解
元组可以被看成是不能改变的列表.列表是动态的,你可以增添,插入,删除,更改列表元素.有时我们需要这样的操作,但是有些时候我们需要保证有些数据是不能被用户或程序更改的.这就是元组的作用. 准确的说,列表 ...
- Django:登录、注册、退出
创建项目: 一.创建项目 django-admin startproject form_test 二.创建应用 1.cd form_test 2.sudo ./manage.py startapp f ...
- PHP扩展之 Imagick安装
最近的PHP项目中,需要用到切图和缩图的效果,在本地windows开发环境,安装过程遇到好多问题,在此与大家分享. php官网里,一大群老外也看不懂这玩意怎么装,主要原因在于,php版本庞杂,还有x8 ...
- mui APP 微信登录授权
一.在微信平台上申请appid.appsecret. 二.app --> manifest.json-->SDK配置(填写申请好的appid和appsecret) 三.在登录页,点击微信登 ...
- 关于SQL查询某年数据 和DATEPART 函数的使用
数据库查询某年数据(sql server)select *from 表名 where YEAR(存时间的字段名) =某年select *from News where YEAR(addDate) =2 ...
- 浅谈RPC框架
RPC(Remote Promote Call) RPC(Remote Promote Call):一种进程间通信方式.允许像调用本地服务一样调用远程服务. RPC框架的主要目标就是让远程服务调用更简 ...
- JVM学习笔记(一):Java虚拟机和虚拟机内存区域
为什么Java程序需要运行在虚拟机上 因为Java在设计之初的跨平台特性,我们知道Java程序是运行在Java虚拟机上的.如果你要问为什么Java程序要运行在虚拟机上,我可以反问你几个问题. 为什么买 ...
- 第十三章·Kibana深入-使用地图统计客户端IP
地址库 在ELK中,我们可以使用地址库,来对IP进行分析,对日志进行分析,在ELKstack中只有Logstash可以做到,但是出图,是Kibana来出的,所以我们首先需要下载地址库数据文件,然后对L ...
- 注解【Annotation】、反射
注解:Annotation是从JDK5.0开始引入的新技术.Annotation的作用:如果没有注解信息处理流程,则注解毫无意义)- 不是程序本身,可以对程序作出解释.(这一点,跟注释没什么区别)- ...
- BLE 5协议栈-通用属性规范层(GATT)
文章转载自:http://www.sunyouqun.com/2017/04/page/2/ 通用属性规范GATT(Generic Attribute Profile)将ATT层定义的属性打包成不同的 ...