Así que tengo una aplicación Vue 3 + Typescript. npm run build , por supuesto, toma la aplicación y la compila en la carpeta dist para que pueda implementarse. Tengo un archivo mecanografiado de trabajador web que me gustaría compilar por separado para que termine en la raíz de la carpeta dist con el nombre worker.js . Esto es lo que estoy buscando:
dist |- worker.js src |- worker.ts // This gets compiled to js file in dist folder Intenté hacer esto usando DefinePlugin de DefinePlugin en mi vue.config.js así:
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' } } } } Desafortunadamente, esto no funciona, npm run build simplemente ignora por completo el archivo worker.ts y no aparece en la carpeta dist en ninguna parte, ni siquiera como un fragmento. ¿Alguna sugerencia? ¿O es posible lo que quiero hacer? ¡Gracias por cualquier ayuda!
Pude obtener el resultado deseado usando esbuild . Ahora puedo escribir mi trabajador web en Typescript y usar clases y funciones desde mi aplicación Vue. También compila a la velocidad del rayo. Acabo de agregar el comando node ./esbuild.js a mis npm run dev y npm run build , y ahora se compila en la carpeta public antes de que se compile la aplicación Vue. Aquí está mi archivo esbuild.js .
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))Avíseme si tiene alguna pregunta, estaré encantado de ayudar a cualquiera a hacer que esto funcione.