gulp打包混淆async await(gulp-babel)

这里写自定义目录标题

使用功能

在原本已有功能下新增es6转es5
gulp官网

流程
  • 安装babel, 敲 npm install gulp-babel
  • 根据文档调用
const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('dist'))
);
  • 运行,发现生成的代码怪怪的,为啥不是es5的代码?后面发现原来要配置presets(ps: 不要怪我,初体验嘛,之前没咋用过)
  • babel官网,学习了一下presets怎么配置,代码改成
const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () => {
   gulp.src('src/app.js')
   .pipe(babel({
       "presets": [
           ['@babel/env', {
               "debug": false,
               "loose": false,
               "targets": {
                   "browsers": ["ie >= 9", 'Android >= 5.0', 'iOS >= 8']
               },
           }],
       ],
   }))
   .pipe(gulp.dest('dist'))
}));
  • 改完后,普通的es6编译出来是正确的,但是用async await时,报错: request is not define,找了一下,基本都是说上webpack的,所以我也上webpack. 敲npm install webpack-stream
const gulp = require('gulp');
const babel = require('gulp-babel');
const webpack = require('webpack-stream');

gulp.task('default', () => {
   gulp.src('src/app.js')
   .pipe(babel({
       "presets": [
           ['@babel/env', {
               "debug": false,
               "loose": false,
               "targets": {
                   "browsers": ["ie >= 9", 'Android >= 5.0', 'iOS >= 8']
               },
           }],
       ],
   }))
   .pipe(webpack({
       entry: {
           app: 'src/app.js',
       },
       output: {
           filename: '[name].js',
       },
   }))
   .pipe(gulp.dest('dist'))
})
  • 加了webpack后, async await 的确可以跑了,但是我的项目是多入口,用webpack很麻烦. 自己实在没有办法了,去咨询了大神们. 热心大神了解情况研究一番后, 说直接用babel就够了,只是每个文件需要引入 polyfill.min.js. 引入后,的确能跑起来了,大神果然是大神.
  • 因为我监听 js 文件变化后, 再执行编译, 发现每次都会编译所有的 js 文件,这样太浪费时间了, 百度了一下,发现了有个缓存文件的插件, 敲 npm install gulp-cached
const gulp = require('gulp');
const babel = require('gulp-babel');
const cached = require('gulp-cached');

gulp.task('default', () => {
    gulp.src('src/app.js')
    .pipe(cached())
    .pipe(babel({
        "presets": [
            ['@babel/env', {
                "debug": false,
                "loose": false,
                "targets": {
                    "browsers": ["ie >= 9", 'Android >= 5.0', 'iOS >= 8']
                },
            }],
        ],
    }))
    .pipe(gulp.dest('dist'))
})
  • 完美解决问题, End~
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值