码迷,mamicode.com
首页 > 其他好文 > 详细

现代化前端开发方法

时间:2017-11-23 19:48:40      阅读:391      评论:0      收藏:0      [点我收藏+]

标签:uil   任务   firefox   UI   环境   编写   文件   目录   pre   

 

使用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。

现代化前端开发方法

标签:uil   任务   firefox   UI   环境   编写   文件   目录   pre   

原文地址:http://www.cnblogs.com/tianboblog/p/7885694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!