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', ...
随机推荐
- 并不对劲的复健训练-bzoj5339:loj2578:p4593:[TJOI2018]教科书般的亵渎
题目大意 题目链接 题解 先将\(a\)排序. \(k\)看上去等于怪的血量连续段的个数,但是要注意当存在\(a_i+1=a_{i+1}\)时,虽然它们之间的连续段为空,但是还要算上:而当\(a_m= ...
- 安装jenkins时出现 No such plugin: cloudbees-folder的解决办法
今天安装了一下jenkins,在初始化安装插件时出现" No such plugin: cloudbees-folder"错误,根据网上的教程: 1.打开链接"http: ...
- ssh无密登录_集群分发脚本xsync
1.ssh免密登录 ssh ip地址 [root@192 ~]# ssh 192.168.1.102 root@192.168.1.102's password: Last login: Mon Fe ...
- Hibernate 数据库方言
1.所有关系型数据库都支持使用标准SQL语句 2.但数据库在语法细节上存在一些差异 3.Hibernate可根据方言自动应付底层数据库访问所存在的细节差异,将HQL有针对的转化为某一数据库所支持的SQ ...
- linux 安装telnet、curl、ifconfig、vim、ping等工具
1.首先执行下面命令更新相关源 apt-get update 2.安装telnet apt-get install telnet 3.安装curl apt-get install curl 4.安装i ...
- 移动端真机debug调试神器 vConsole学习(二)之实战
项目中实际使用 在项目中实际使用的时候发现还是有很多问题的 最初使用方式 <script src="vconsole.min.js"></script> ...
- Selenium 基本使用
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.c ...
- Django基础第三篇
一.ORM操作 1.常用字段和参数 Autofied 自增的整形字段,必填参数primary_key=True, 则成为数据库的主键,如无该字段,django自动创建 IntegerField 一个 ...
- vue封装swiper
参考:https://github.com/surmon-china/vue-awesome-swiper npm install vue-awesome-swiper --save 全局引入 imp ...
- webpack初体验_集成插件_集成loader
webpack初体验 如果没装 webpack 就先装一下,命令行输入npm i webpack -g 新建一个项目 创建一个空的项目 定义一个名称 创建一个Module 选择静态 web 输入名称 ...