请选择 进入手机版 | 继续访问电脑版

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

[复制链接]
漫舞飞天 发表于 2021-1-2 18:58:21 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
这里写自界说目次标题



使用功能

在原本已有功能下新增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
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )