Babel (gulp-babel) Uncaught ReferenceError: require is not defined

I hope you can help me

I've been using gulp, gulp-babel. That's why, I got this error. So, I don't know what i can make to use module (ES6) because, I'm trying to import another file into this and It shows me this message. Of course, I know the problem is after code has transpiled. Because, I tried linking code not transpiled and It works perfectly

This is my files. app.js *(Where I want to use import to get another module...)

With Requirefrom commonjs project, neither does it work

import a from "./comun.js"; //This doesn't working
class Player{
    contructor(){...}
}

comun.js(Where i want to get a const from)

export const a = 1;

index.html(Html file) (File transpiled)

<script src="./dist/js/app.js" type="module"></script>

And this is my gulpfile.babel.js (It's working perfectly)

const gulp = require ('gulp');
const babel = require('gulp-babel');
function transpileToES5() {
    return  gulp.src('./assets/js/*.js')
    .pipe(babel())
    .pipe(gulp.dest('./dist/js/'));
}

gulp.task('default', function () {
    return gulp.watch(['./assets/js/*.js'], transpileToES5)
});

And finally. This is my .babelrc file (I tried with commonjs, systemjs, amd... Nothing works )

{
    "presets" : ["@babel/env"],
    "plugins": ["transform-es2015-modules-commonjs"]
}

THIS IS ERROR SHOW CAPTURE OF THE ERROR ON THE BROWSER

THIS IS THE WRONG LINE SHOW CAPTURE OF THE WRONG LINE ON THE BROWSER