使用gulp+bebal实现前端自动化es6转es5的构建
说明:es6语法已经越来越普及,但是一些低版本的浏览器不支持es6的语法特性,所以我们在开发完前端项目后,往往需要统一把前端es6的代码编译成es5的代码。本文介绍的就是如何手动和自动的把es6转成es5的方法。本文前提:需要提前安装好nodejs环境,能够使用npm命令。如果不了解如果配置npm,可以查看笔者前几次的博文。
使用babel来手动构建es5的方式:
1、创建一个空的前端项目
可以使用webStorm等前端工具创建一个空的项目即可。
并创建src/main.js,文件内容如下,其中使用了es6语法胖箭头函数:
(()=>{ console.log(es6 test !); })();
2、创建npm的配置文件package.json
项目根目录下创建package.json文件,里面只写一个{}即可:
{}
3、安装babel-cli
babel-cli可以把es6语法转成大多数浏览器所能识别的es5语法。
在项目根目录下执行:
$ npm install babel-cli --save-dev
执行后,项目中会自动创建node_modules文件夹;
package.json文件中会产生devDependencies节点,节点中会有“babel-cli”字样的属性。
4、下载es2015解释器
如果要构建到es5语法,就需要下载es2015的解释器,执行:
$ npm install babel-preset-es2015 --save-dev
执行后,package.json文件devDependencies节点中会创建"babel-preset-es2015"字样的属性。
5、创建babel的配置文件
项目中创建.babelrc文件,内容:
{"presets" : [["es2015"]]}
6,创建npm build命令
在package.json文件增加script节点,表示可以使用npm run build命令执行以下语句
"script" : { "build" : "babel src -d assets/js" }
6、构建
$ npm run build
执行后,项目中会产生assets/js/main.js文件,里面内容就是es5语法了,内容:
"use strict"; (function()(){ console.log(es6 test !); })();
使用gulp + babel 自动化构建方法:
1、安装gulp
执行以下两句。分别是全局安装和本地安装。
说明:如果是自己项目使用,第一个全局安装就可以了;但是本地安装可以方便与其他人拷贝走项目后,其他人就不需要自己安装gulp就能编译工程了
$ npm install gulp-cli --global $ npm install gulp --save-dev
2、安装gulp-babel
gulp-babel是gulp和babel集成的工具。执行以下:
$ npm install gulp-babel --save-dev
3、配置gulp配置文件
项目根目录下创建gulpfile.js。
const gulp = require('gulp'); const gulp = require('gulp-babel'); gulp.task('default', ['babel']); gulp.task('babel', function(){ return gulp.src('src/*.js') .pipe(babel({ presets : ['es2015'] })) .pipe(gulp.desc('assets/js')) })
然后每次执行一下以下命令就可以实现编译了,执行后会把编译后的js文件放在项目中的assets/js文件夹下,
$ gulp
4、实现实时编译
改造gulpfile.js,如下:
const gulp = require('gulp'); const gulp = require('gulp-babel'); gulp.task('default', ['watch']); gulp.task('babel', function(){ return gulp.src('src/*.js') .pipe(babel({ presets : ['es2015'] })) .pipe(gulp.desc('assets/js')) }); gulp.task('watch', function(){ gulp.watch('src/*.js', ['babel']); });
然后打开项目后执行一次以下命令即可,gulp就会监听工程,每次js有变化都会自动的实时编译。
$ gulp
当然,如果不想实时编辑,执行手动编辑,执行 $ gulp babel 也可。
使用gulp+bebal实现前端自动化es6转es5的构建的更多相关文章
- gulp自动化ES6转ES5
npm install --save-dev gulp npm install --save-dev gulp-babel npm install --save-dev babel-preset-es ...
- gulp详细教程——前端自动化构建工具
项目构建 一个项目是由多个开发者共同开发一个项目,各负责不同的模块,这就会造成一个完整的项目许多‘代码片段’组成,合并css.javascript,压缩html.css.javascript.imag ...
- 前端自动化构建工具 Gulp 使用
一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...
- 【前端自动化】Gulp的使用(一):安装gulp
作为一个.NET码农,在前端高速发展的时代,深深感觉自己那么点“前端”技术不够看,比如开发出来的js css等文件庞大,不便于管理,还记得以前的开发就是累加 html css jquery, 现 ...
- 前端自动化gulp遇上es6从 无知到深爱
Gulp是什么? Gulp是前端自动化的工具,但Gulp能用来做什么 1.搭建web服务器 2.使用预处理器Sass,Less 3.压缩优化,可以压缩JS CSS Html 图片 4.自动将更新变化的 ...
- 前端自动化工具gulp自动添加版本号
之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 前端自动化构建工具gulp记录
一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...
- 学习安装并配置前端自动化工具Gulp
Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...
随机推荐
- Mac ssh 免密码登录 Mac 或者 Linux
最近在 Mac上操作另一台 Mac 和 Linux 服务器,每次输密码太麻烦.所以直接设置 ssh 免密码登录,省去输入密码的过程.先在本机执行 ls ~/.ssh 若不存在 id_rsa,id_rs ...
- python中subprocess模块
subprocess 模块 subprocess称之为子进程,进程是一个正在进行的程序 子进程是由另一个正在运行的程序启动的程序,例如QQ聊天点击一个链接,打开了浏览器,那么浏览器称之为QQ的子进程 ...
- Controller层aop
利用@Around通知修改Controller的返回值 自定义一个注解@OperationBtn 在切入点Controller上加上自定义注解 接下来就是重点了,AspectJ写切面类,对该Contr ...
- java应用健康检查
本文主要针对自己手写shell监控应用状态,有可系统解决方案的,比如K8S,可以略过 #!/bin/sh#health_check.sh count=`ps -ef | grep test.jar | ...
- MFC笔记4
1.添加图片 1)静态加载图片,直接在resourceView中控件设置就可以以实现 2)动态加载时,按照鸡啄米的教程http://www.jizhuomi.com/software/193.html ...
- 20175126《Java程序设计》第二周学习总结
# 20175126 2016-2017-2 <Java程序设计>第二周学习总结 ## LINUX系统安装好输入法后如何使用? - 相信很多同学在刚接触虚拟机LINUX系统时,会因无法输入 ...
- 【开发工具】secureCRT的使用
总结自己平时使用secureCRT中遇到的问题 1.安装 2.secureCRT设置标签显示远程主机ip地址
- F4 help for month
INCLUDE rmcs0f0m. s_month FOR s001-spmon NO-EXTENSION NO INTERVALS OBLIGATORY. AT SELECTION-SCREEN O ...
- 2017-2018-2 20165315 实验四《Android程序设计》实验报告
2017-2018-2 20165315 实验四<Android程序设计>实验报告 第24章:初识Android Android Studio项目的目录树 1 build:该目录包含了自动 ...
- linux就该这么学,第五课,
今天讲的比较难理解,要重预习和复习 今天讲了2个多小进,主要讲了SHELL,shell的组成:第一行为脚本声明 #!/bin/bash ,第二行为脚本的注释信息,第三为 脚本的执行语句 接收用户参 ...