为什么gulp构建过程中的browserify步骤会编译我的网络工作者打字稿代码？

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。see sharper想要引起更多关注对此问题。

我正在尝试在一个使用Gulp和Browserify进行构建的React / Typescript项目中设置一个Web worker。事实证明，这很难做。我目前遇到的问题是主应用程序的打字稿编译步骤正在尝试包括网络工作者代码。这样做失败了，因为网络工作者打字稿需要与其余代码不同的类型-不允许使用DOM类型。但是我完全看不出代码是如何包含在编译器中的。据我对browserify的了解，它会查看根文件中指定的依赖项，并从那里构建依赖项树。那棵树永远不要引用Web Worker文件及其代码，所以这是怎么回事？

邮政编码：

const compileMainScript = (done) => {
  log('Compiling script for my-app');
  return browserify({
    basedir: '.',
    debug: mode === 'dev',
    entries: ['src/my-app/my-app.tsx'],
    cache: {},
    packageCache: {},
  })
    .plugin(tsify)
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('*path-to-destination-folder*'))
    .on('error', err => {
      console.error(err.toString());
      done(err);
    });
};

（简化的）目录结构类似于：

-src
  -workers
    my-worker.ts
  -my-app
    my-app.tsx

因此，您可以看到正在构建的应用程序（my-app）和Web工作者位于同一级别的路径中–甚至不像Web工作者代码位于my-app文件夹中。 browserify甚至如何看到它？请注意，my-worker中的任何地方均未引用my-app。我可以任意更改工作程序的文件夹或文件名，并且会出现相同的问题。

Answer 1

我不熟悉browserify + tsify构建配置。但是我知道，与babel的单文件策略不同，TS编译器在设计时会考虑整个项目。

所以在我看来，您的问题已经提出，因为ts编译器将worker文件作为项目的一部分。您需要在项目中排除。

您可以尝试tsconfig.json中的“排除”字段，或根据tsify docs尝试以下操作：

browserify({ ... }).plugin(tsify, { files: [] })

tsify支持覆盖文件，排除和包含选项。特别是，如果指定了“文件”：[]，则仅将Browserify入口点（及其依赖项）传递给TypeScript进行编译。