输出中的 Browserify 模块顺序 - 开发服务器和构建服务器之间的区别

Question

我们的 gulp 过程中有一个 browserify 步骤，它的输出在开发服务器和我们的构建服务器之间是不同的。

构建服务器上的输出在输出文件的顶部包含一个模块，requires源中更下方的一个文件。这似乎导致了一个问题，我们在 Chrome 开发工具中得到 Uncaught Error: Cannot find module 'module-name'。

然而，dev 中的输出在源代码中有我们的问题模块。

在这两种情况下，模块定义在源代码中都比 requireing 它的行更靠后。

我检查了 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){

Answer 1

根据：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']
      })

输出中的 Browserify 模块顺序 - 开发服务器和构建服务器之间的区别

Browserify module order in output - Differing between dev and build server

browserify