gulp：es6转es5的插件——gulp-babel

淡淡的烟草味﹌ 2023-02-10 03:54 36阅读 0赞

### **gulp-babel**这是Babel的Gulp插件。 ###

### 一、安装 ###

1、首先要安装gulp-babel、babel-core、babel-preset-es2015这三个插件

下面这种安装方法，安装的不是最新的插件，往下读，会明白原因，以及如何安装最新的。

npm install gulp-babel@7 --save-dev
    
    npm install babel-core --save-dev
    
    npm install babel-preset-es2015 --save-dev

**2、gulp-babel要指定版本号**

npm上查看：[gulp-babel的使用和版本号][gulp-babel]，文档会介绍不同的版本依赖安装

7.0的gulp-bable依赖6.0的babel-core；

8.0的gulp-babel依赖7.0的@babel/core；

因为npm上gulp-babel的最新版本为8.0.0，不指定版本号，默认会安装最新版的。

**3、babel-core和@babel/core的区别**

babel-core在7.0 之后，包名升级为 @babel/core，所以在我们没有指定版本号的时候下

安装babel-core的实际上是安装的最后版本的babel-core，版本为6.26.3

安装的 @babel/core实际上是最新版本的，版本号为7.9.6

npm上查看：[最新版的@babel/core][babel_core]

npm上查看：[最新版的babel-core][babel-core]

二、配置

在项目根目录下，即与.gulpfile文件同一目录，创建.babelrc文件

设置内容为：

{
        "presets": ["es2015"]
    }

三、使用

1、在gulpfile中，引入插件

var babel =require("gulp-babel")

2、创建task任务

.pipe(babel())就是转换es6为es5

gulp.task('uglify', function(done){
        gulp.src('./src/js/**/*.js')
            .pipe(babel())
            .pipe(uglify())
            .pipe(gulp.dest('./dist/js'))
        done()
    })

[gulp-babel]: https://www.npmjs.com/package/gulp-babel
[babel_core]: https://www.npmjs.com/package/@babel/core
[babel-core]: https://www.npmjs.com/package/babel-core

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关 es6转es5方法

1、下载该转码包链接: https://pan.baidu.com/s/1tdDiNI-mVPpgeSjQjGcYuQ 提取码: 5wrd 复制这段内容后打开百度网...

分手后的思念是犯贱/ 2024年04月18日 04:42/ 0 赞/ 97 阅读

相关 ES6安装head插件

[https://www.cnblogs.com/lele-house/p/9629580.html][https_www.cnblogs.com_lele-house_p_9

电玩女神/ 2023年10月18日 15:31/ 0 赞/ 32 阅读

相关 ES6 转 ES5

那么 Babel 是如何把 ES6 转成 ES5 呢，其大致分为三步：将代码字符串解析成抽象语法树，即所谓的 AST 对 AST 进行处理，在这个阶段可以对 E

男娘i/ 2023年10月12日 08:09/ 0 赞/ 88 阅读

相关 gulp：es6转es5的插件——gulp-babel

gulp-babel这是Babel的Gulp插件。一、安装 1、首先要安装gulp-babel、babel-core、babel-preset-es2015这三个

淡淡的烟草味﹌/ 2023年02月10日 03:54/ 0 赞/ 37 阅读

相关 gulp：条件语句插件——gulp-if

Condition条件判断 Only uglify the content if the condition is true, but send all the files

我不是女神ヾ/ 2022年12月02日 15:07/ 0 赞/ 243 阅读

相关 gulp：压缩CSS插件——gulp-clean-css

[gulp-clean-css插件介绍][gulp-clean-css] gulp-clean-css插件是[gulp][] plugin to minify CSS,

旧城等待，/ 2022年11月29日 12:22/ 0 赞/ 249 阅读

相关 gulp插件黑名单

在使用gulp插件的时候，应该参照官方的建议，不要使用官方黑名单的插件，避免出现一些莫名其妙的问题。 blackList地址 [https://github.com/g

绝地灬酷狼/ 2022年09月25日 15:19/ 0 赞/ 229 阅读

相关 gulp插件/gulp模块

1、gulp 介绍：[http://www.gulpjs.com.cn/docs/getting-started/][http_www.gulpjs.com.cn_docs

雨点打透心脏的1/2处/ 2022年06月06日 01:20/ 0 赞/ 533 阅读

相关 ES 6.3 安装head插件

ES 6.3 安装head插件 ①下载head压缩包，解压 ![70][] ②确保已安装node.js，npm可用(最好换成淘宝源，速度快) 设成淘宝的 npm c

系统管理员/ 2022年05月14日 05:39/ 0 赞/ 223 阅读

相关 Gulp常用的一些插件

自己常用Gulp插件，这是gulpfile.js文件，喜欢的可以复制下来尝试用用。 var gulp = require( 'gulp' ), /

骑猪看日落/ 2022年03月19日 06:29/ 0 赞/ 278 阅读