How to properly build js with gulp+babel?

Question

Node.js

Greetings.
Please tell me (I didn’t fully understand something) how to copy the code correctly (and connect commonJS) so that there is no Uncaught ReferenceError: exports is not defined
error The gulp-task code responsible for the task:

gulp.task('frontend::js', () => {
  let arr = [
    'node_modules/@babel/polyfill/dist/polyfill.js',
    './src/classes/Data.js',
    './src/main.js'
  ];

  return gulp.src(arr)
    .pipe(babel({
      presets: ['@babel/env'],
      plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-modules-commonjs"]
    }))
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(concat('common.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./dist/js/'))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('./dist/js/'))
    .pipe(livereload());
});

Dependencies:

"dependencies": {
    "del": "^3.0.0",
    "gulp": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-pug": "^4.0.1",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^3.2.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-watcher": "^1.0.1",
    "normalize-scss": "^7.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-transform-modules-commonjs": "^7.1.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.1.6",
    "gulp-babel": "^8.0.0",
    "gulp-livereload": "^4.0.0",
    "gulp-uglify": "^3.0.1"
  }

.babelrc config:

{
    "presets": [
        [
            "@babel/env"
        ]
    ]
}

Everything is copied without errors, but it does not work in the browser. I don’t fully understand how to properly cut commonjs

Answer 1

shmatuan , Browser error "Uncaught ReferenceError: exports is not defined". I connect as usual - the compiled file from dist.