gulp-babel使用

本文详细介绍了如何使用Gulp自动化编译ES6/ES7语法至ES5语法,适用于已安装Node.js的开发者。包括建立工程目录、配置开发环境、编写Gulp配置文件、测试配置成功及生成ES5代码的全过程。

各大浏览器厂商对es2015功能支持不完全,等到全部支持会等很长时间,如果现在使用es2015,可以选择babel一个将ES6/ES7写的代码转换为ES5代码的编译器.

我们选择使用gulp自动化编译生成es5代码.

假设你已经安装过了nodejs.

配置开发环境:

1. 建立工程目录:  

$mkdir test && cd test

 

2. 新建工程配置文件package.json 

$npm init

3. 安装gulp工具

$npm install --save-dev gulp gulp-babel gulp-concat gulp-sourcemaps babel-preset-es2015

 

4. 新建gulp配置文件

$vim gulpfile.js

 

写入代码gulpfile.js:

const gulp = require("gulp");

const sourcemaps = require("gulp-sourcemaps");

const babel = require("gulp-babel");

const concat = require("gulp-concat");

 

gulp.task('default', () =>

    gulp.src('src/**/*.js')

        .pipe(babel({

            presets: 'es2015'

        }))

        .pipe(gulp.dest('dist'))

);

 

//生成sourcemaps

 

gulp.task('all', () =>

    gulp.src('src/**/*.js')

        .pipe(sourcemaps.init())

        .pipe(babel({

            presets: 'es2015'

        }))

        .pipe(concat('all.js'))

        .pipe(sourcemaps.write('.'))

        .pipe(gulp.dest('dist'))

);
View Code 

 

5. 测试是否配置成功

mkdir src && cd src && vim app.js

 

写入代码:

function f() { 

    let x;

    {

      // okay, block scoped name

      const x = "sneaky";

      // error, const

      //x = "foo";

console.log(x);

    }

    // okay, declared with `let`

    x = "bar";

    // error, already declared in block

    //let x = "inner";

    console.log(x);

}

 

f();
View Code

 

6.执行

$gulp

 

会自动生成dest目录,包含app.js文件,是转化过的js.恭喜你已经学会!

 

转载于:https://www.cnblogs.com/w-jinfeng/p/5501902.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值