javascript - Babel (gulp-babel) 未捕获的 ReferenceError : require is not defined

Question

我正在使用 gulp , gulp-babel ，这会导致错误。
我不知道如何使用模块(ES6)，因为当我尝试将另一个文件导入其中时，它会显示以下消息:

Uncaught ReferenceError: require is not defined

我知道问题出在代码转换之后，因为我尝试链接到未转换的代码，并且效果很好。

这些是我的文件。

app.js *(我想使用 import 来获取另一个模块...)

注意:使用 require来自 CommonJS 项目，也不起作用。

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