gulp-babel没有将ES6转为ES5,

使用gulp-babel转换ES6到ES5,然后用uglify对代码压缩,gulpfile中的代码片段:

gulp.task('default'(=>
    gulp.src('src/app.js')
        .pipe(babel())
        .pipe(gulp.dest('dist'))
);

看到下面的报错

GulpUglifyError: unable to minify JavaScript
SyntaxError: Unexpected token: keyword «const»
或 SyntaxError: Unexpected token: punc «(»

这个报错是因为uglify不支持ES6语法,但是我上面的gulp任务中是先用babel对ES6语法转换之后再uglify,说明babel没有正常工作。打开dist文件夹查看生成的文件中的代码,确实ES6语法没有被转成ES5。奇怪的是项目之前一直正常。感觉是某个相关的node模块版本升级后导致的,我的项目之前是在根目录下放了一个.babelrc文件,里面的内容是:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": "> 0.5%, not dead"
            }
        ]
    ],
    "comments": false,
    "ignore": []
}

之前的解决方法就是把package.json和package-lock.json都换成之前正常的版本,并删除node_modules,然后重新npm install。

研究了很久,发现问题应该还是出在presets没有生效上,最后按gulp-balel官方说明文档的例子解决:

gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('dist'))
);

 也就是在gulpfile.js中的babel方法的参数中直接指定presets。

参考:理解 babel.config.js 和 babelrc

有道词典
理解 babel.config ...
详细X
Understand the Babel. Config. Js and babelrc
posted @ 2023-02-09 09:39  johnjackson  阅读(273)  评论(0编辑  收藏  举报