Question

我们的gulp流程中有一个浏览器步骤，dev和我们的构建服务器之间的输出不同。

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

然而，dev中的输出在源代码中有更深层次的问题。

在这两种情况下，模块定义在源代码中显示的位置比行require更低。

我检查了npm，node，babel，babelify，browserify，vinyl-source-stream的版本。这些在dev和我们的构建服务器上都是相同的。

可能导致此问题的原因是什么？

有问题的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

直接问题，我尝试将所有相对路径切换到绝对路径和/或设置基础

将basedir添加到browserify似乎已经解决了这个问题：

browserify({
        entries: files,
        debug: true,
        basedir: __dirname,
        paths: ['./content/scripts', './content/scripts/modules', './content/libs']
      })

浏览器输出中的模块顺序 - 开发服务器和构建服务器

1 个答案: