【前端】在Gulp中使用Babel
Install
$ npm install --save-dev gulp-babel babel-preset-es2015
用法1:
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', () => {
return gulp.src('src/app.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist'));
});
用法2:
在项目根路径创建文件 .babelrc。内容为
{
"presets": ["es2015"]
}
再
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("src/**/*.js") // ES6 源码存放的路径
.pipe(babel())
.pipe(gulp.dest("dist")); // 转换成 ES5 存放的路径
});
参考文献:
【前端】在Gulp中使用Babel的更多相关文章
- gulp 中的增量编译
最近花一点时间学了下 gulp,顺便学了下 sass,因为工作中并不需要用(我比较希望学习是需求驱动),所以一直拖到现在才学.突然觉得学习这类工具性价比很高,半天一天即可上手,技能树丰富了(尽管可能只 ...
- 前端工程师需要掌握的 Babel 知识
在前端圈子里,对于 Babel,大家肯定都比较熟悉了.如果哪天少了它,对于前端工程师来说肯定是个噩梦.Babel 的工作原理是怎样的可能了解的人就不太多了.本文将主要介绍 Babel 的工作原理以及怎 ...
- 前端架构gulp与webpack(知识点整理)
一 概念介绍 gulp 是 task runner,Webpack 是 module bundler.可以这么说, Webpack 和 gulp 本身都有 95% 的功能是不能被对方替代,或者直接说和 ...
- 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo
前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
- 一个利用pojo类从前端页面request中获取参数的小框架~
写之前不知道Spring已经实现这样的功能,所以傻傻的写了这个东西! 实现原理挺有趣的在此记录一下.从去年十月参加java开发以来自己终于有了点小进步. 好开心. 解决问题(详解):前端form表单提 ...
- 如何在Gulp中提高Browserify的打包速度
使用Browserify打包js时如果项目变得越来越大,编译时间就会相应变得越来越长.使用官方的插件watchify是个比较有效的提高速度方案. 提速原理 watchify的用法和gulp的watch ...
- vue中引入babel步骤
vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...
- 《前端之路》之 Babel 下一代 JavaScript 语法编译器
写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...
- 在IDEA(phpStorm)中使用Babel编译ES6
安装Babel 官方文档建议我们根据单个项目进行本地安装,原因是不同的项目可以依赖不同版本的 Babel,使你的项目更方便移植.更易于安装. 在项目的根目录下使用命令行工具(CMD等)执行下面代码 n ...
随机推荐
- LL(1)文法
<源程序>→<外部声明>|<外部声明><函数体> <外部申明>→<头文件><函数声明>|其他声明 <函数体&g ...
- Stack的c实现
用c语言实现stack的初始化,push,pop和Clear操作 #include<stdio.h> #include<stdlib.h> #include<assert ...
- 前台获取Dropdownlist选中的text
$("#ddltest").find("option:selected").text()
- LeetCode Add Two Numbers II
原题链接在这里:https://leetcode.com/problems/add-two-numbers-ii/ 题目: You are given two linked lists represe ...
- web前端开发和后端开发有什么区别?
web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责 ...
- npm总结
1.npm install -g 模块 全局安装 2.npm install 模块@version 安装具体摸个版本的模块 ...
- git操作的常用命令
git remote show origin 查看git远程信息git remote set-url origin git@gitlab.staff.xdf.cn:woxue/woxueadmin.g ...
- css3水波纹效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- mysqlbinlog 查看binlog时报错unknown variable 'default-character-set=utf8'
mysqlbinlog --no-defaults mysql-bin.000003 > /home/3.sql 下侧文字转自 http://www.cnblogs.com/cobbliu/p/ ...
- debian bcm43* 无线网卡驱动
deb http://httpredir.debian.org/debian/ jessie main contrib non-free # apt-get update# apt-get insta ...