Как правильно собрать js с помощью gulp+babel?

Question

[VX299]

Приветствую.
Подскажите, пожалуйста (что-то до конца не понял) как правильно скопилировать код (и подключить commonJS), чтобы не было ошибки Uncaught ReferenceError: exports is not defined

Код gulp-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": {
    "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:

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

Всё копилируется без ошибок, но вот в браузере не работает. Не понимаю до конца как правильно подрубить commonjs

Comments

[shmatuan]

Какие ошибки в браузере?
Как подключаете в html?

Answer 1

[VX299]

shmatuan, Ошибка в браузере "Uncaught ReferenceError: exports is not defined". Подключаю как обычно - скомпилированный файл из dist.