Is it possible to compile a TypeScript file with webpack independently of a Vue application?

In my Vue 3 + Typescript app, using `npm run build` compiles the app into the `dist` folder for deployment. I have a web worker typescript file that I want to compile separately so it ends up in the root of the `dist` folder as `worker.js`. Here's what I'm trying to achieve:

dist
  |- worker.js
src
  |- worker.ts // Compiles to js file in dist folder

I attempted this by using webpack's `DefinePlugin` in my `vue.config.js` like this:

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'
            }
        }
    }
}

However, running `npm run build` doesn't include the `worker.ts` file in the `dist` folder at all, not even as a chunk. Any suggestions on how to make this work or if it's even possible? Appreciate any help!

Answer №1

After experimenting with different tools, I found success using esbuild. This tool allowed me to write my web worker in Typescript while easily incorporating classes and functions from my Vue app. What impressed me the most was how quickly it compiled. By simply adding the node ./esbuild.js command to my npm run dev and npm run build scripts, esbuild seamlessly compiled to the public folder prior to the Vue app building process. Take a look at my esbuild.js file below.

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))

If you have any questions or need assistance setting this up, feel free to reach out. I'd be more than happy to help!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to decrease a field in a MongoDB database on a daily basis?

In the process of constructing an Angular2 application using MEAN stack architecture, I have a field called Remaining Days in my MongoDB database. I am interested in having this field automatically decrement by 1 each day. Do you know if this is possible ...

How to retrieve the same value from multiple selections using Vanilla JavaScript and multiple select options?

Why do we consistently receive the same value and index when using the ctl key to select multiple options? document.querySelector('select').addEventListener('change', function(e) { console.log(this.selectedIndex) console.log(e.ta ...

Is it possible for a node module to import a plain JavaScript file?

As I navigate through learning about node, npm, and webpack, I have a quick query: Can a js file in a node module require another vanilla js file? Or would I need to add module.exports to turn the vanilla js into a node-compatible format? ...

Step-by-step guide on importing popper.js

While it may seem like a simple question, I am struggling to find the answer. How can I import popper.js that comes with Bootstrap 4 beta? I am using Bower and have successfully installed Bootstrap 4 beta. However, in the bower_components folder, there is ...

Transition effortlessly between web pages with subtle fading effects

I want to implement smooth page transition effects between two web domains: mcpixel.co.uk/new and mcpaper.co.uk. I am the owner of both domains. When a link in the header is clicked, I'd like the page to fade transition to the new page without any whi ...

Building a WordPress calculator form that retains user input without requiring a resubmit and incorporates custom field values

Currently tackling a challenge on my Wordpress website. Without any code yet (after numerous attempts at rewriting 4 different forms), I'll simply outline what I aim to accomplish, confident it's a straightforward task with something crucial elud ...

The Angular Google Maps Directive zooms in too much after the "place_changed" event has fired

Currently, I am developing a store locator app for DHL accessible at storefinder.hashfff.com/app/index.html For this project, I decided to utilize the angular-google-maps library for its features. However, in hindsight, working directly with the Google Ma ...

Retrieving selections from a group of checkboxes and managing their addition or removal in an array

Currently, I am in the process of creating a form that includes a group of checkboxes. My goal is to be able to capture the value of a specific checkbox when it is clicked and add it to an Array using the useState hook. If the checkbox is unchecked, I wan ...

Scrolling using JavaScript's 'smooth scrolling' feature is currently disabled

Background of the Issue: I am in the process of creating a one-page website using Twitter Bootstrap 3 within an ASP.NET MVC project. The Challenge: My current challenge involves implementing 'smooth scrolling' functionality that scrolls to the ...

Utilizing TypeScript with Context API

This is my first time working with Typescript to create a context, and I'm struggling to get it functioning properly. Whenever I try to define interfaces and include them in my value prop, I encounter errors that I can't figure out on my own. Spe ...

Refresh the child component whenever there is a change in the parent's state

As of now, I am in the process of developing a MultiCheckbox Component which looks like this: Checkbox.tsx import './Checkbox.scss'; import React, {ChangeEvent, Component} from 'react'; /* * Description of Checkbox properties */ in ...

Generating interactive elements in VUE is key

I am unsure about how to dynamically create components without using the <component :is=''> tag. I would like to insert a component into the DOM through JavaScript. Similar to how you would add a new modal in jQuery with $("body").append(" ...

issues with firebase dependencies no longer functioning

My Vuejs app has been running smoothly with Firebase Authentication, but today I encountered an issue. Upon starting the app (npm run serve), I am now facing the following error: These dependencies were not found: * firebase/app in ./src/helpers/firebase. ...

I am in search of a JavaScript or jQuery plugin for an HTML slider with a unique range functionality

I've been searching online but couldn't find a slider like the one shown in the attachment. Can anyone help? Is there a way to create this specific slider or is there an existing plugin or library for it? Please refer to the image below : ...

React: I am looking to incorporate two API calls within a single function

I am currently learning ReactJS and focusing on implementing pagination. My goal is to fetch page data from a server using an API, with Loopback being the tool for API integration. The initial setup involves displaying a list of 10 entries on the first pag ...

Error: Model attribute missing in Adonis JS v5 relationship

Recently, I started diving into the Adonis framework (v5) and decided to build a todo list api as part of my learning process. However, I'm facing an issue concerning the relationship between the User and Todo entities. Let me show you the models fo ...

Enhancing PHP function speed through pre-compilation with Ajax

I am curious about compiling server side functions in PHP with Ajax, specifically when multiple asynchronous calls are made to the same server side script. Let's consider a PHP script called "msg.php": <?php function msg(){ $list1 = "hello world ...

Using React Native to dynamically change color based on API response

I'm currently working on a React Native project and I have a requirement to dynamically change the background color of a styled component based on the value retrieved from an API. However, I'm facing some challenges in implementing this feature. ...

Can Vue 3 be utilized with both the composition API and vue class components?

For the past 8 months, our project has been developed using Vue 3 and the class components. However, it appears that the class components are no longer being maintained. Therefore, we have decided to gradually transition to the composition API, specificall ...

Incorporating Dynamic Javascript: A Step-by-Step Guide

I came across a select object that looks like this: <select id="mySelect" onchange = "start()" > <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> < ...