现代化前端开发方法

使用babel将es6代码转化为es5

由于目前大多浏览器不支持ES6语法(firefox和chorme)支持,需要把ES6编译成ES5: - 使用nodejs的npm包管理器,安装babel-cli依赖:

`npm install babel-cli --save-dev`
  • 其中--save-dev作用是把依赖名称保存到package.json配置中

下载解释器依赖:

npm install babel-preset-es2015 --save-dev
  • 需要一个配置文件.babelrc 告诉我们需要什么版本解释器(因为一个项目中可能有多个解释器es2016,es2017...),把ES6语法编译成ES5

npm run build 即可看到把ES6语法解析成了ES5了

gulp完成前端自动化构建任务

npm install gulp-cli --global  系统全局安装

npm install gulp-cli --save-dev 本环境安装

编写gulpfile.js,指定任务名称:

const gulp = require(‘gulp‘)

gulp.task(‘default‘,function(){
    console.log("test gulp task!");
});

gulp调用babel,安装依赖:

npm install gulp-babel --save-dev

基于gulp.watch监视项目js(使用ES6编写的)目录,自动调用babel解析成ES5。

时间: 2024-08-30 12:22:41

现代化前端开发方法的相关文章

基于微软XAML技术的前端开发方法

使用XAML技术的平台目前包括WPF,Silverlight,Windows8等平台,未来的Windows10统一Windows App也使用XAML技术. 前端开发指通过可视化集成开发环境进行用户界面的设计和实现,结合手动编写XML界面描述代码,完成表现层开发的过程.基于XAML技术的前端开发使用的开发环境是Blend,输出是XAML代码.由于目前版本的Blend 2013存在一些问题,需要和VS配合使用.Blend 2015进行了重大改进,较好地解决了各种问题,但还未发布正式版. 下面总结一

样式脚本本地化开发方法①【前端开发技巧】

朋友们,是不是在进行前端开发的时候经常需要修改css和js代码呢? 调试代码时.代码存储库不断被修改?同一个脚本样式文件n多人操作?移动端调试时需要各种清理缓存…… 这些问题将会带来各种各样对前端开发的不便.因此需要有一种本地化开发的方法:本地直接进行修改调试代码,然后直接在PC端或移动端测试运行.如此这般,那调试代码就简单快捷多了.有助于“选择性的”提高工作效率哦.(为什么是有选择性呢?比如下面说的方法.因为这个方法肯定也是有局限性的.比如:非该局域网下的ip访问该页面便加载不了样式与脚本,除

【前端开发】25种提高网页加载速度的方法和技巧

尊重原创:http://blog.csdn.net/wxzking/article/details/4089384 您希望加快网页的加载速度吗?了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在某些情形下,加载时间最多可缩短 80%.下面介绍二十五中网速方法和技巧. 一.使用良好的结构 可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显.XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 <start> 和 <end> 标记),这意味着浏览器

前端开发中通过js设置cookie的一组方法

我们在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能. 此次文章中的方法是在前端开发工作中自己随手写的一组通过js设置与获取cookie的方法,能够应用在多说情况下,没做细挖与深究. js方法的完整代码如下: var cookie = { set:function(key,val,time){//设置cookie方法 var date=new Date(); //获取当前时间 var expiresDays=time; //将d

小猿圈web前端开发讲师:零基础自学html5开发方法

web前端开发目前市场使用率随着需求逐年递增.越来越多的年轻人转行进入了web前端开发领取.html5强大的功能是有目共睹的,本属自身独特的优势让这一技术越来越受欢迎,相比于原生APP,html5已经逐渐在用户体验生无限接近,再加上低廉的开发成本和强大的适配功能,早已经可以俘获开发商和开发者的芳心,本文小猿圈web前端开发讲师介绍零基础如何自学html5开发? 小猿圈web前端开发讲师:零基础自学html5开发方法: 1.拒绝插件,遇到交互效果就选择扒插件,这是一种非常不可取的方法,在这种情况之

总结:前端开发中让元素水平垂直居中的方法

前端开发中,我们经常需要对元素进行水平垂直居中.为此,小编特地总结了让元素居中的方法. 水平居中text-align:center; 这个是没有浮动的情况下,我们可以先将要居中的块级元素设为inline/inline-block,然后在其父元素上加上属性text-align:center;即可.如果要居中的块级元素直接是内联元素(span.img.a等),直接在其父级元素上加上属性text-align:center;即可: .way { border: 1px solid red; width:

提高前端开发效率的N种方法

一.使用固定的html模板和css公共样式 事先把模板建好,每次需要用的时候直接拿来就行,不再需要为浏览器兼容问题考虑太多时间 这里我整理了一套,希望对大家有帮助:http://www.cnblogs.com/happyty/p/4693896.html 二.使用css模块 推荐:http://www.divcss5.com/template/ 这里有一些常用的模块 三.幻灯片.图片切换 解决方案 对于这个问题,我们如果自己写js的话,效率大大降低,如果去网上找的话,也要花很多时间,这些做法在实

教你正确的学习web前端开发技术的方法分享

近几年IT业可谓是发展火热,而且新生了很多的职业.例如安卓开发工程师.iOS开发工程师.在这众多的新生职业中备受瞩目的当属web前端工程师了,前端工程师薪资高,就业发展前景好,更多的人选择了这一职业成为自己的发展方向,想要自己成为一名合格的web前端工程师,web前端开发学习路线图值得大家去看看. 以上这份学习路线课程大纲,挺适合大家借鉴来学习的.web前端课程包括了几个方面的内容: 1.学习HTML,这是最简单,最基本的是要掌握div,formtable.Ulli.P.跨度.字体这些标签,这些

7招提升你的前端开发效率

7招提升你的前端开发效率 前言 前端工程师其实是一个工作很杂的职位,除了要负责切图.写html/css/js外,还要解决一系列的浏览器兼容性.网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现. 对于开发效率,我个人理解是 开发效率 = 新增代码的效率 + 修改代码的效率 + 维护代码的效率 那么如何提高前端开发效率便可以按照前端工程化的理念来进行划分.下面我就介绍下7个提高前端开发效率的方法. 前端工程化 方法 1.切图 切图是一个前端最基础的技能,一般我们使用