Babel(gulp-babel)未捕获ReferenceError:未定义require

时间:2020-01-31 03:14:30

标签: javascript gulp babeljs es6-modules

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

未捕获的ReferenceError:未定义require

我知道问题出在代码被编译之后,因为,我尝试链接到未编译的代码,并且效果很好。

这些是我的文件。

app.js *(我要使用import来获取另一个模块的地方...)

注意:在CommonJS项目中使用require也不起作用。

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

comun.js (我要从中获取const的地方)

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"]
}

这是错误:
SHOW CAPTURE OF THE ERROR ON THE BROWSER

这是导致错误的行:
SHOW CAPTURE OF THE WRONG LINE ON THE BROWSER

1 个答案:

答案 0 :(得分:3)

我有完全一样的问题。您必须使用Browserify + Babelify + Gulp。这里有更多信息:

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

Private Sub combo_NotInList(NewData As String, Response As Integer)

If NewData = "Check-in" Then Exit Sub

End Sub