Gulp：将ESM转换为UMD后缺少依赖性

Question

我有一个艰巨的任务，将ESM转换为UMD：

gulp.Task("js-build",function(){
  return gulp
      .src('wwwroot/js/src/**/*.js') 
      .pipe(print())
       .pipe(plumber())
      .pipe(babel({
          presets: ['@babel/env'],
          plugins:[
                '@babel/plugin-transform-modules-umd',
          ]
      }))
      //.pipe(uglify())
      .pipe(gulp.dest('wwwroot/js/dist')) 
})

正在构建两个js代码文件wwwroot / js / src文件夹

tape-machine.js

export class TapeMachine {
    constructor(str) {
        this.recordedMessage = str
    }
    play() {
        console.log(this.recordedMessage)
    }
}

main.js

import {
    TapeMachine
} from './ tape-machine

var tapMachine = new TapeMachine('Hello World')
tapMachine.play()

当gulp任务完成时，我具有如下构建的 main.js ：

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(["./codes"], factory);
  } else if (typeof exports !== "undefined") {
    factory(require("./codes"));
  } else {
    var mod = {
      exports: {}
    };
    factory(global.codes);
    global.site = mod.exports;
  }
})(this, function (_codes) {
  "use strict";
  var tapMachine = new _codes.TapeMachine('Hello World');
  tapMachine.play();
});

当我在浏览器中运行 main.js 时，就会发生异常

Uncaught TypeError: Cannot read property 'TapeMachine' of undefined

在gulp任务中转送esm时，我没有丢失任何东西吗？