使用 gulp-babel es6转es5语法

最新推荐文章于 2020-01-20 15:19:46 发布

题词策

最新推荐文章于 2020-01-20 15:19:46 发布

阅读量748

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Elementsboy/article/details/103129323

本文详细介绍了如何使用Gulp和Babel将现代ES6语法转换为向后兼容的ES5语法，包括必要的包安装、配置文件创建、任务定义以及polyfill的使用，适用于前端开发者进行代码兼容性处理。

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

使用 gulp-babel es6转es5语法

1.安装

1.@babel/core:babel核心库
2.@babel/cli:执行babel命令
3.@babel/preset-env:装了所有es6转化es5的规则
4.@babel/polyfill:补充低版本缺失的内容，如promise对象
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/polyfill

2.新建.babelrc文件

.babelrc

{
    "presets": [
        "@babel/preset-env"
    ]
}

3.安装gulp-babel

npm i gulp-babel -D

4.引入gulp-babel

gulpfile.js
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('script', function () {
    //1.找到js gulp.src()
    return gulp.src('./src/js/*.js')
        .pipe(babel()) //es6->es5 
        //2.压缩js
        .pipe(uglify())
        //3.输出js
        .pipe(gulp.dest('./dist/js'));
})

5.index.js

require('@babel/polyfill')
setTimeout(()=>{
    
})
babel后

setTimeout(function(){
    
})