说明: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的构建的更多相关文章

  1. gulp自动化ES6转ES5

    npm install --save-dev gulp npm install --save-dev gulp-babel npm install --save-dev babel-preset-es ...

  2. gulp详细教程——前端自动化构建工具

    项目构建 一个项目是由多个开发者共同开发一个项目,各负责不同的模块,这就会造成一个完整的项目许多‘代码片段’组成,合并css.javascript,压缩html.css.javascript.imag ...

  3. 前端自动化构建工具 Gulp 使用

    一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...

  4. 【前端自动化】Gulp的使用(一):安装gulp

    作为一个.NET码农,在前端高速发展的时代,深深感觉自己那么点“前端”技术不够看,比如开发出来的js css等文件庞大,不便于管理,还记得以前的开发就是累加 html  css   jquery, 现 ...

  5. 前端自动化gulp遇上es6从 无知到深爱

    Gulp是什么? Gulp是前端自动化的工具,但Gulp能用来做什么 1.搭建web服务器 2.使用预处理器Sass,Less 3.压缩优化,可以压缩JS CSS Html 图片 4.自动将更新变化的 ...

  6. 前端自动化工具gulp自动添加版本号

    之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...

  7. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  8. 前端自动化构建工具gulp记录

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

  9. 学习安装并配置前端自动化工具Gulp

    Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...

随机推荐

  1. Mac ssh 免密码登录 Mac 或者 Linux

    最近在 Mac上操作另一台 Mac 和 Linux 服务器,每次输密码太麻烦.所以直接设置 ssh 免密码登录,省去输入密码的过程.先在本机执行 ls ~/.ssh 若不存在 id_rsa,id_rs ...

  2. python中subprocess模块

    subprocess  模块 subprocess称之为子进程,进程是一个正在进行的程序 子进程是由另一个正在运行的程序启动的程序,例如QQ聊天点击一个链接,打开了浏览器,那么浏览器称之为QQ的子进程 ...

  3. Controller层aop

    利用@Around通知修改Controller的返回值 自定义一个注解@OperationBtn 在切入点Controller上加上自定义注解 接下来就是重点了,AspectJ写切面类,对该Contr ...

  4. java应用健康检查

    本文主要针对自己手写shell监控应用状态,有可系统解决方案的,比如K8S,可以略过 #!/bin/sh#health_check.sh count=`ps -ef | grep test.jar | ...

  5. MFC笔记4

    1.添加图片 1)静态加载图片,直接在resourceView中控件设置就可以以实现 2)动态加载时,按照鸡啄米的教程http://www.jizhuomi.com/software/193.html ...

  6. 20175126《Java程序设计》第二周学习总结

    # 20175126 2016-2017-2 <Java程序设计>第二周学习总结 ## LINUX系统安装好输入法后如何使用? - 相信很多同学在刚接触虚拟机LINUX系统时,会因无法输入 ...

  7. 【开发工具】secureCRT的使用

    总结自己平时使用secureCRT中遇到的问题 1.安装 2.secureCRT设置标签显示远程主机ip地址

  8. F4 help for month

    INCLUDE rmcs0f0m. s_month FOR s001-spmon NO-EXTENSION NO INTERVALS OBLIGATORY. AT SELECTION-SCREEN O ...

  9. 2017-2018-2 20165315 实验四《Android程序设计》实验报告

    2017-2018-2 20165315 实验四<Android程序设计>实验报告 第24章:初识Android Android Studio项目的目录树 1 build:该目录包含了自动 ...

  10. linux就该这么学,第五课,

    今天讲的比较难理解,要重预习和复习 今天讲了2个多小进,主要讲了SHELL,shell的组成:第一行为脚本声明 #!/bin/bash   ,第二行为脚本的注释信息,第三为 脚本的执行语句 接收用户参 ...