无法从已经 "required" 的模块中 require()
Unable to require() from inside an already "required" module
我有这个项目结构:
myApp
├── gulpfile.js
├── package.json
└── source
└── scripts
├── modules
│ └── utils.js
├── background.js
└── data.json
我的browserify
任务:
gulp.task('browserify', function () {
return gulp.src(['./source/scripts/**/*.js'])
.pipe($.browserify({
debug: true,//for source maps
standalone: pkg['export-symbol']
}))
.on('error', function(err){
console.log(err.message);
this.emit('end');
})
.pipe(gulp.dest('./build/scripts/'));
});
我的样本utils.js
:
const data = require('../data.json');
const utils = (function () {
const output = function () {
console.log(data);
};
return {
output: output,
};
}());
module.exports = utils;
如果我尝试使用当前目录结构构建它,我会收到此错误:
module "../data.json" not found from "/dev/myApp/source/scripts/fake_4d8cf8a4.js"
我只能构建它,如果我将 data.json
放在 modules
目录中 AND 放在 scripts
目录中,即。它只有在我复制文件时才有效:
myApp
├── gulpfile.js
├── package.json
└── source
└── scripts
├── modules
│ ├── utils.js
│ └── data.json
├── background.js
└── data.json
显然这不行...我做错了什么?
谢谢
根据您使用 gulp.src
将文件传递给 $.browerify
,我推断您正在使用 Gulp 插件,可能是 gulp-browserify
。通常 不推荐 使用插件从 Gulp 调用 Browserify。推荐的方法是直接调用 Browserify。事实上,Gulp 的 blacklist of plugins 指出:
"gulp-browserify": "use the browserify module directly",
我已经复制了你的目录结构,并为你没有提供内容的文件设置了一些合理的值(data.json
,background.js
),事实上,我得到了和你一样的错误当我尝试 运行 您显示的 Gulp 代码时。但是,如果我切换到直接调用 Browserify,我不会收到任何错误。这是我的代码:
const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
gulp.task('browserify', function () {
return browserify({
entries: ["./source/scripts/background.js",
"./source/scripts/modules/utils.js"],
debug: true,//for source maps
standalone: "foo",
})
.bundle()
.pipe(source('bundle.js')) // This sets the name of the output file.
.pipe(gulp.dest('./build/scripts/'));
});
您在代码中使用 gulp.src(['./source/scripts/**/*.js'])
,这意味着 Browserify 会将您所有的 .js
文件作为包的条目。
所以我在上面的代码中放置了两个条目,它们手动复制了您在插件中使用的模式。 但是,虽然 Browserify 不会使用此设置产生错误,我怀疑您实际上不想有多个条目. 通常,我们将一个入口点传递给 Browserify 并让它跟踪 require
调用以确定它需要拉取什么。
我有这个项目结构:
myApp
├── gulpfile.js
├── package.json
└── source
└── scripts
├── modules
│ └── utils.js
├── background.js
└── data.json
我的browserify
任务:
gulp.task('browserify', function () {
return gulp.src(['./source/scripts/**/*.js'])
.pipe($.browserify({
debug: true,//for source maps
standalone: pkg['export-symbol']
}))
.on('error', function(err){
console.log(err.message);
this.emit('end');
})
.pipe(gulp.dest('./build/scripts/'));
});
我的样本utils.js
:
const data = require('../data.json');
const utils = (function () {
const output = function () {
console.log(data);
};
return {
output: output,
};
}());
module.exports = utils;
如果我尝试使用当前目录结构构建它,我会收到此错误:
module "../data.json" not found from "/dev/myApp/source/scripts/fake_4d8cf8a4.js"
我只能构建它,如果我将 data.json
放在 modules
目录中 AND 放在 scripts
目录中,即。它只有在我复制文件时才有效:
myApp
├── gulpfile.js
├── package.json
└── source
└── scripts
├── modules
│ ├── utils.js
│ └── data.json
├── background.js
└── data.json
显然这不行...我做错了什么?
谢谢
根据您使用 gulp.src
将文件传递给 $.browerify
,我推断您正在使用 Gulp 插件,可能是 gulp-browserify
。通常 不推荐 使用插件从 Gulp 调用 Browserify。推荐的方法是直接调用 Browserify。事实上,Gulp 的 blacklist of plugins 指出:
"gulp-browserify": "use the browserify module directly",
我已经复制了你的目录结构,并为你没有提供内容的文件设置了一些合理的值(data.json
,background.js
),事实上,我得到了和你一样的错误当我尝试 运行 您显示的 Gulp 代码时。但是,如果我切换到直接调用 Browserify,我不会收到任何错误。这是我的代码:
const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
gulp.task('browserify', function () {
return browserify({
entries: ["./source/scripts/background.js",
"./source/scripts/modules/utils.js"],
debug: true,//for source maps
standalone: "foo",
})
.bundle()
.pipe(source('bundle.js')) // This sets the name of the output file.
.pipe(gulp.dest('./build/scripts/'));
});
您在代码中使用 gulp.src(['./source/scripts/**/*.js'])
,这意味着 Browserify 会将您所有的 .js
文件作为包的条目。
所以我在上面的代码中放置了两个条目,它们手动复制了您在插件中使用的模式。 但是,虽然 Browserify 不会使用此设置产生错误,我怀疑您实际上不想有多个条目. 通常,我们将一个入口点传递给 Browserify 并让它跟踪 require
调用以确定它需要拉取什么。