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 地址