输出中的 Browserify 模块顺序 - 开发服务器和构建服务器之间的区别
Browserify module order in output - Differing between dev and build server
我们的 gulp 过程中有一个 browserify 步骤,它的输出在开发服务器和我们的构建服务器之间是不同的。
构建服务器上的输出在输出文件的顶部包含一个模块,requires
源中更下方的一个文件。这似乎导致了一个问题,我们在 Chrome 开发工具中得到 Uncaught Error: Cannot find module 'module-name'
。
然而,dev 中的输出在源代码中有我们的问题模块。
在这两种情况下,模块定义在源代码中都比 require
ing 它的行更靠后。
我检查了 npm、node、babel、babelify、browserify、vinyl-source-stream 的版本。这些在开发和我们的构建服务器上都是一样的。
可能是什么导致了这个问题?
有问题的 gulp 任务如下所示:
gulp.task('esnext', function(done) {
var files = glob('content/scripts/**/*.js', function(err, files) {
files = files.filter(function(file) {
return file.indexOf('modules') <= -1;
});
browserify({
entries: files,
debug: true,
paths: ['./content/scripts', './content/scripts/modules', './content/libs']
})
.transform(babelify)
.bundle()
.pipe(source('esnext-temp.js'))
.pipe(gulp.dest('./dist/global/scripts/'))
.on('end', done);
});
});
更新
我已经从 gulp 任务中删除了文件过滤器,这似乎已经部分解决了问题。除了以下内容外,这些文件现在更加相似:
开发:
},{"some-module":7,"some-other-module":18,"another-module":54}],25:[function(require,module,exports){
构建服务器:
},{"some-module":undefined,"some-other-module":undefined,"another-module":undefined}],25:[function(require,module,exports){
根据:https://github.com/substack/node-browserify/issues/1271#issuecomment-104897413
to your immediate problem, I'd try switching all the relative paths to
absolute paths and/or setting a basedir
将 basedir 添加到 browserify 似乎已经解决了这个问题:
browserify({
entries: files,
debug: true,
basedir: __dirname,
paths: ['./content/scripts', './content/scripts/modules', './content/libs']
})
我们的 gulp 过程中有一个 browserify 步骤,它的输出在开发服务器和我们的构建服务器之间是不同的。
构建服务器上的输出在输出文件的顶部包含一个模块,requires
源中更下方的一个文件。这似乎导致了一个问题,我们在 Chrome 开发工具中得到 Uncaught Error: Cannot find module 'module-name'
。
然而,dev 中的输出在源代码中有我们的问题模块。
在这两种情况下,模块定义在源代码中都比 require
ing 它的行更靠后。
我检查了 npm、node、babel、babelify、browserify、vinyl-source-stream 的版本。这些在开发和我们的构建服务器上都是一样的。
可能是什么导致了这个问题?
有问题的 gulp 任务如下所示:
gulp.task('esnext', function(done) {
var files = glob('content/scripts/**/*.js', function(err, files) {
files = files.filter(function(file) {
return file.indexOf('modules') <= -1;
});
browserify({
entries: files,
debug: true,
paths: ['./content/scripts', './content/scripts/modules', './content/libs']
})
.transform(babelify)
.bundle()
.pipe(source('esnext-temp.js'))
.pipe(gulp.dest('./dist/global/scripts/'))
.on('end', done);
});
});
更新
我已经从 gulp 任务中删除了文件过滤器,这似乎已经部分解决了问题。除了以下内容外,这些文件现在更加相似:
开发:
},{"some-module":7,"some-other-module":18,"another-module":54}],25:[function(require,module,exports){
构建服务器:
},{"some-module":undefined,"some-other-module":undefined,"another-module":undefined}],25:[function(require,module,exports){
根据:https://github.com/substack/node-browserify/issues/1271#issuecomment-104897413
to your immediate problem, I'd try switching all the relative paths to absolute paths and/or setting a basedir
将 basedir 添加到 browserify 似乎已经解决了这个问题:
browserify({
entries: files,
debug: true,
basedir: __dirname,
paths: ['./content/scripts', './content/scripts/modules', './content/libs']
})