我有一个使用 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
- 你好
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
仍然包含 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/'));
});
关于javascript - Gulp 和 Babel : Error: Cannot find module,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37580349/