Babel（gulp-babel）报错：Uncaught ReferenceError: require is not defined。

Question

我正在使用 gulp 和 gulp-babel，但出现了错误。
我不知道如何使用模块 (ES6)，当我尝试导入另一个文件时，它显示以下消息：

Uncaught ReferenceError: require is not defined

我知道问题出在代码转换之后，因为我尝试链接到未转换的代码，它可以完美地工作。
这些是我的文件：
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"]
}

这是错误信息：

这是导致错误的代码行：

- Alejandro Parra

---

这个问题没有答案吗？我也遇到了同样的问题，尝试在IE11中让我的代码工作，并添加core-js 3。 - pingeyeg

不，我最终使用了webpack。因为这对我来说曾经是“不可能的”。但你可以查看像Webpack、Browserify甚至CommonJS、RequireJS这样的打包工具。关于它们有很多信息，并且可以解决你的问题。Gulp可能需要一个打包工具（一些浏览器还不支持ES6模块，比如IE11），这是我的结论。 - Alejandro Parra

Answer 1

我曾遇到同样的问题，您需要使用Browserify + Babelify + Gulp。更多信息请参见：这里。

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

- Nemanja Petrovic