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

这里写自界说目次标题

• 
  
  
  
  • 
    
    
    
    • 
      
      
      
      • 
        
        
        
        • 使用功能
          
        • 流程
          
           
        
         
      
      
    
  
  

使用功能

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

• 安装babel, 敲 npm install gulp-babel
  
• 根据文档调用
  

1. 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怎么设置,代码改成
  

1. 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
  

1. 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
  

1. 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~
  

来源：https://blog.csdn.net/gguugguu/article/details/111561174
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！