I'm currently working on setting up a web worker in a React/Typescript project that utilizes Gulp with Browserify for the build process. This task has proven to be quite challenging. The issue I'm facing right now is that during the typescript compilation step for the main application, it's trying to include the web worker code as well. This is causing a failure because web worker typescript requires different types compared to the rest of the code - it doesn't allow DOM types. However, I'm confused as to how the web worker code is being included in the compile process at all. According to my understanding of browserify, it looks at the dependencies specified in the root file and builds a dependency tree from there. This tree should not have any reference to the web worker file or its code. So, what could possibly be happening?
Gulp code:
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);
});
};
The directory structure (simplified) looks something like this:
-src
-workers
my-worker.ts
-my-app
my-app.tsx
As you can see, the app being built (my-app) and the web worker are located at the same level within the paths - the web worker code isn't even inside the my-app folder. How does browserify manage to encounter it? It's important to note that there are no references to my-worker anywhere in my-app. Even if I change the folder or file name of the worker, the same issue persists.