为什么 browserify 在 gulp 构建过程中会编译我的 web worker typescript 代码？

Question

我正在尝试在 React/Typescript 项目中设置网络工作者，该项目使用 Gulp 和 Browserify 进行构建。事实证明这是一件非常困难的事情。我目前遇到的问题是主应用程序的打字稿编译步骤试图包含网络工作者代码。这失败了，因为 web-worker 打字稿需要与其余代码不同的类型——不允许 DOM 类型。但是我根本看不到代码是如何包含在编译中的。就我对 browserify 的理解而言，它查看根文件中指定的依赖项，并从那里构建一个依赖项树。那棵树不应该引用 web worker 文件及其代码，这是怎么回事？

Gulp代码：

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 Worker 位于同一级别的路径中 - 它甚至不像 Web Worker 代码位于 my-app 文件夹中. browserify 是怎么看到它的？请注意，my-app 中的任何地方都没有对 my-worker 的引用。我可以任意更改工作人员的文件夹或文件名，但会出现同样的问题。

Answer 1

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

所以在我看来你的问题是因为 ts 编译器将工作文件作为项目的一部分。您需要从您的项目中排除它。

您可以尝试tsconfig.json中的"exclude"字段，或者根据tsify docs尝试以下操作：

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

tsify supports overriding the files, exclude and include options. In particular, if "files": [] is specified, only the Browserify entry points (and their dependencies) are passed to TypeScript for compilation.

为什么 browserify 在 gulp 构建过程中会编译我的 web worker typescript 代码？

Why does browserify step in gulp build process compile my web worker typescript code?

typescript

gulp

browserify

web-worker