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

Question

我正在使用gulp 、 gulp-babel ，這會導致錯誤。
我不知道如何使用模塊（ES6），因為當我嘗試將另一個文件導入其中時，它向我顯示了以下消息：

未捕獲的 ReferenceError：需要未定義

我知道問題出在代碼轉譯之后，因為我嘗試鏈接到未轉譯的代碼，並且它運行良好。

這些是我的文件。

app.js *（我想使用 import 來獲取另一個模塊的地方...）

注意：使用來自 CommonJS 項目的require ，也不起作用。

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

comun.js （我想從哪里得到一個常量）

export const a = 1;

index.html (Html 文件) (文件轉譯)

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

這是我的gulpfile.babel.js （它運行良好）

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)
});

最后。 這是我的.babelrc文件（我嘗試過使用 commonjs、systemjs、amd...沒有任何效果）

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

這是錯誤：

這是導致錯誤的行：

Answer 1

我遇到了完全相同的問題。 你必須使用 Browserify + Babelify + Gulp。 更多信息在這里：

https://medium.com/@hey.aaron/getting-import-export-working-es6-style-using-browserify-babelify-gulp-5hrs-of-life-eca7786e44cc

    return browserify({
    entries: ['./src/js/index.js'],
    debug: true,
    transform: [
      babelify.configure({ presets: ['@babel/preset-env'] }),
    ],
  })
    .bundle()
    .pipe(source('index.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))