你能从 Vue 应用程序中单独使用 webpack 编译一个 TS 文件吗？

Question

所以我有一个 Vue 3 + Typescript 应用程序。 npm run build 当然会获取应用程序并将其编译到 dist 文件夹中，以便可以部署。我有一个 web worker typescript 文件，我想单独编译它，以便它最终位于 dist 文件夹的根目录中，名称为 worker.js。这是我要找的东西：

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

我尝试在我的 vue.config.js 中使用 webpack 的 DefinePlugin 这样做：

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

不幸的是，这不起作用，npm run build 完全忽略了 worker.ts 文件，它不会出现在 dist 文件夹中的任何地方，甚至不会作为一个块出现。有什么建议么？或者我想做的事情甚至可能吗？感谢您的帮助！

Answer 1

我能够使用 esbuild 获得想要的结果。现在我可以用 Typescript 编写我的 web worker 并使用类和我的 Vue 应用程序中的函数。它还可以快速编译闪电。我刚刚将 node ./esbuild.js 命令添加到我的 npm run dev 和 npm run build 脚本中，现在它在 Vue 应用程序构建之前编译到 public 文件夹。这是我的 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))

如果您有任何问题，请告诉我，我很乐意帮助任何人解决这个问题。

你能从 Vue 应用程序中单独使用 webpack 编译一个 TS 文件吗？

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

javascript

typescript

vue.js

webpack

web-worker