说明: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. 实战ELK(5) Logstash 入门

    Logstash 是一个开源的数据收集引擎,它具有备实时数据传输能力.它可以统一过滤来自不同源的数据,并按照开发者的制定的规范输出到目的地. 一.原理 Logstash 通过管道进行运作,管道有两个必 ...

  2. java细节知识

    代码优化细节 (1)尽量指定类.方法的final修饰符 带有final修饰符的类是不可派生的.在Java核心API中,有许多应用final的例子,例如java.lang.String,整个类都是fin ...

  3. Delphi RTTI的应用(一)

    1.获取DbgrdiEH 某一个选项的属性.加载到ComBox procedure TForm1.FormCreate(Sender: TObject); var PropInfo: PPropInf ...

  4. mapper.xml文件,sql语句参数为list

    <insert id="insertPjCustomAttribute" parameterType="com.devops.server.model.PjCust ...

  5. [mybatis]Example的用法

    Example类是什么? Example类指定如何构建一个动态的where子句. 表中的每个non-BLOB列可以被包括在where子句中. 例子是展示此类用法的最好方式. Example类可以用来生 ...

  6. 可以作为瘟到死(windows)路径的字符

    !#$%&""()+-0123456789;=@ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz[]^_`{}~

  7. linux shell并发执行命令

    一般我们在linux上十一shell命令的批量执行操作,一般使用for或者while 循环进行操作,但是这样有一个问题,for或者while本质上是串行的,并不能,如果某一个命令执行耗费的时间比较长, ...

  8. EOS踩坑记 2

    [EOS踩坑记 2] 1.--contracts-console 在开发模式下,需要将 nodeos 添加此选项. 2.Debug Method The main method used to deb ...

  9. DRF的解析器和渲染器

    解析器 解析器的作用 解析器的作用就是服务端接收客户端传过来的数据,把数据解析成自己可以处理的数据.本质就是对请求体中的数据进行解析. 在了解解析器之前,我们要先知道Accept以及ContentTy ...

  10. linux文本格式转换

    问题:在linux环境下面执行SH的可执行文件. -bash: ./start.sh: /bin/sh^M: bad interpreter: No such file or directory 解决 ...