我有一个使用gulp和设置的项目babel。一切工作正常，除非创建模块并将其从ES6转换为ES6并将其导入时不起作用。我收到一个错误：
Error: Cannot find module 'hello.js'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
这是我的gulpfile.babel.js：
import gulp from "gulp";
import babel from "gulp-babel"
import concat from "gulp-concat"
const dirs = {
src: "src",
dest: "build"
}
gulp.task("build", () => {
return gulp.src(dirs.src + "/**/*.js")
.pipe(babel())
.pipe(concat("build.js"))
.pipe(gulp.dest(dirs.dest))
});
gulp.task("default", ["build"]);
在构建过程中，所有内容都连接到一个文件中。在src/我下面：
app.js
import hello from './hello.js'
console.log(hello());
hello.js
export default () => {
return 'Hey from hello.js';
};
我的运行方式是这样的：
npm start
基本上就是这样node ./build/build.js。
我认为这是因为它将ES6连接到ES5，并且bundle.js仍然包含require hello.js。它不会找到它，因为它是串联的。那可能吗？
串联两个模块文件并期望程序正常运行是不正确的，即使将其编译到ES5中也是如此。捆绑不仅涉及串联脚本：每个模块都需要一个闭包来注册出口并解析其他模块的内容。
相反，您必须使用捆绑工具，例如Browserify，Webpack或Rollup。这是与Browserify捆绑在一起的方式（在这种情况下，依赖Babelify变换比容易gulp-babel）：
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
gulp.task('browserify', function() {
return browserify({
entries: './src/app.js'
})
.transform(babelify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./build/'));
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句