Gulp(2): 使用 async\await 出现错误 regeneratorRuntime is not defined

在使用 Gulp 对 js 压缩的过程中，少不了 ES6 语法的转换。但是，gulp 对此能做的实在有限。。。

gulp-babel

这是最基础的引用，遇到 async\await 时，解析后出现
ReferenceError: regeneratorRuntime is not defined，
缺少了 regeneratorRuntime 这个模块，需要从外部引入。

@babel/plugin-transform-runtime、@babel/runtime

网上不少说法是加 @babel/plugin-transform-runtime、@babel/runtime，
引入两个 babel 库，配置加入 plugins: ["@babel/plugin-transform-runtime"] ，报错变成了
ReferenceError: require is not defined，
又有人说，babel 只是负责转换语法，保留了 require 这些模块化语法，而浏览器环境不支持。

webpack-stream

找到这一步，又开始看到有人建议 webpack-stream，可以解决 require 的问题。
引入 webpack-stream 包，并在 js 处理前使用。
提示缺少 babel-loader，引入，没报错，不过，发现被模块化的 js 文件，名字被哈希化。
引入插件 vinyl-named 用来保持输入和输出的文件名相同。
最后终于完美运行。

完整代码 ：

const { src, dest, series} = require('gulp');
const gulpif = require('gulp-if');
const lazypipe = require('lazypipe');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const del = require('del');
const cleanCss = require('gulp-clean-css');
const htmlmin = require('gulp-htmlmin');

const webpack = require('webpack-stream');
const named = require('vinyl-named');

// const entry = '../egg_wx'    // 小程序地址
const entry = './demo'      // 示例地址
const output = './dist'     // 输出目录

const isJS = (file) => file.extname === '.js';
const isCSS = (file) => file.extname === '.wxss' || file.extname === '.css';
const isWXML = (file) => file.extname === '.wxml' || file.extname === '.html';

const uglifyOption = {
  // 压缩配置
  compress: { 
    drop_console: true,
  },
  // 输出配置
  output: {
    comments: false,    // 移除注释
  },
  toplevel: false,    // 混淆最高作用域中的变量和函数名
}
const jsChannel = lazypipe()
  .pipe( babel, { 
    presets: ["@babel/env"],
  })
  .pipe( uglify, uglifyOption)

const esChannel = lazypipe()
  .pipe(named)
  .pipe(webpack, {
    module: {
      rules: [{
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader', 
            options: {
              presets: ['@babel/env'],
              plugins: ["@babel/plugin-transform-runtime"] 
            }
          }
        ],
        exclude: /node_modules/
      }]
    }
  })
  .pipe( uglify, uglifyOption)

// 清理
async function clean(){
  await del(output);
}
async function fileBuild() {
  src([ 
    `${entry}/**/*`,
    `!${entry}/**/.*`,
    `!${entry}/node_modules/*`,
    `!${entry}/**/*.md`,
  ], {
    allowEmpty: true
  })
  // 分别处理 js、wxss、wxml
  .pipe(gulpif( isJS, jsChannel()))
  .pipe(gulpif( isCSS, cleanCss()))
  // 取消对 wxml 的处理，<input></input>等与 html 中存在冲突
  .pipe(dest(output))
}

async function chunkBuild() {
  src([ 
    `${entry}/**/*`,
    `!${entry}/**/.*`,
    `!${entry}/node_modules/*`,
    `!${entry}/**/*.md`,
  ], {
    allowEmpty: true
  })
  // 分别处理 js、wxss、wxml
  .pipe(gulpif( isJS, esChannel()))
  .pipe(gulpif( isCSS, cleanCss()))
  .pipe(gulpif( isWXML, htmlmin({
    caseSensitive: true,      //  大小写敏感
    removeComments: true,     // 	删除HTML注释
    keepClosingSlash: true,   // 单标签上保留斜线
    collapseWhitespace: true, // 压缩HTML
    minifyJS: true,           // 压缩页面JS
    minifyCSS: true,          // 压缩页面CSS
  })))
  .pipe(dest(output))
}

exports.clean = clean
exports.build = series( clean, chunkBuild)      // html 压缩
exports.default = series( clean, fileBuild)    // 小程序压缩

• 源码可查看：git 地址