Can you compile a TS file with webpack separately from Vue application?

user_15523218 0
Viewed 169

So I have a Vue 3 + Typescript app. npm run build of course takes the app and compiles it into the dist folder so it can be deployed. I have a web worker typescript file that I would like to be compiled separately so that it ends up in the root of the dist folder with the name worker.js. Here is what I'm looking for:

dist
  |- worker.js
src
  |- worker.ts // This gets compiled to js file in dist folder

I tried doing this by using webpack's DefinePlugin in my vue.config.js like so:

const webpack = require('webpack')

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                entry: `${__dirname}/src/worker.ts`,
                module: {
                    rules: [
                        {
                            test: /worker\.ts$/,
                            use: 'ts-loader',
                            exclude: /node-modules/
                        }
                    ]
                },
                resolve: {
                    extensions: ['.ts']
                },
                output: {
                    filename: 'worker.js',
                    path: `${__dirname}/dist`
                }
            })
        ],
        resolve: {
            alias: {
                vue$: 'vue/dist/vue.esm-bundler.js'
            }
        }
    }
}

Unfortunately this doesn't work, npm run build just completely ignores the worker.ts file and it doesn't show up in the dist folder anywhere, not even as a chunk. Any suggestions? Or is what I'm wanting to do even possible? Thanks for any help!

vue.js webpack typescript web-worker javascript
1 Answers

I was able to get the desired result using esbuild. Now I can write my web worker in Typescript and use classes and functions from my Vue app. It also compiles lightning fast. I just added the node ./esbuild.js command to my npm run dev and npm run build scripts, and now it compiles to the public folder before the Vue app builds. Here is my esbuild.js file.

const esbuild = require('esbuild')
const { nodeExternalsPlugin } = require('esbuild-node-externals')

const config = {
    entryPoints: ['./src/worker.ts'],
    outfile: 'public/worker.js',
    bundle: true,
    minify: false,
    logLevel: 'silent',
    plugins: [nodeExternalsPlugin()]
}

esbuild.build(config).catch(() => process.exit(1))

Let me know if you have any questions, I'd be happy to help anyone out getting this working.

user_155232180
Related