gulp插件--js打包_gulp-babel8有什么变化-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45615650/article/details/116431541

本文介绍了如何通过Gulp和Babel工具链，将JavaScript源代码中的ES6语法转换为ES5，以便在不支持ES6的环境中打包和压缩。重点讲解了gulp-uglify的使用和gulp-babel配合preset-env进行代码转换的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

gulp-uglify
将js文件进行压缩
下载：npm i -D gulp-uglify
将js打包插件引入到gulpfile.js文件中
const uglify= require(‘gulp-uglify’)
得到的是处理流文件的函数
在管道函数中直接使用就可以了

注意：不可以使用ES6语法，一旦使用就会发生报错
一个创建一个导出相对应

const jsHandler = function () {
return gulp          //这里要加return
        .src('./src/js/*js')
        .pipe(转换为ES5)
        .pipe(uglify())
        .pipe(gulp.dest('./dest/js/'))
}
//将js文件打包任务导出
module.exports.jsHandler = jsHandler;

上面使用上面的写法，我们在js中使用ES6语法就会发生错误，所以我们需要在之前我们必须将代码进行转换，转换为ES5

gulp-babel
作用：将ES6代码转换为ES5
gulp-babel存在两个版本：
gulp-babel-7：使用在gulp-3里面的
gulp-babel-8：使用在gulp-4里面的
下载：
gulp-babel依赖另外的两个包：在下载是我们需要两个包一起进行下载
@babel/core @babel/preset-emv
$ npm i -D gulp-babel
$ npm i -D @babel/core
$ npm i -D @babel/preset-emv

导入：
我们导入一个就可以了，其他那两个包会自己进行导入
在gulpfile.js进行导入
const babel= require(‘gulp-babel’)
导入以后得到一个处理流文件的函数
直接在管道函数里执行就好在pipe中执行，但是需要传递参数

const jsHandler = function () {
return gulp          //这里要加return
        .src('./src/js/*js')
        .pipe(baber({
            //如果使用的是baber---7的版本    preset:['es2015'] 
            preset:['@baber/env']   //<------------
        }))  
        .pipe(uglify())
        .pipe(gulp.dest('./dest/js/'))
}
//将js文件打包任务导出
module.exports.jsHandler = jsHandler;