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~