webpack：在 public 文件夹中编译 web worker

Question

我的项目是下一个 js，它使用 webpack 5 来编译 typescript 代码

我的 public 文件夹中有几个 Web Worker 脚本，路径为“/workers/**/*.worker.js”

我想知道我是否也可以用打字稿写它们或者至少使用 babel 将它们转译为 es5（对于旧浏览器）

我知道“public”文件夹下的任何内容都按原样和文件（如 CDN）提供

我可以在我的项目中添加一个“workers”文件夹，并使用 webpack 和下一个 js 将它们加载到 public 路径中吗？

Answer 1

感谢@nalin-ranjan 我想出了解决方案

在我的“next.config.js”中，我在我的 webpack 配置中添加了一条规则：

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.worker\.ts$/,
      type: 'asset/resource',
      generator: {
        filename: 'static/[hash:5].[name].js',
      },
      use: [
        {
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
            configFile: __dirname + '/worker.tsconfig.json',
          },
        },
      ],
    })
    return config
  },
}

有了这条规则，我可以要求我的工作人员并将它们用作 URL 并转换打字稿

此外，我还必须添加一个禁用了“isolatedModules”选项的新“tsconfig”（因为网络工作者不是模块）。为此，我创建了一个与 next.js 相同的 tsconfig 文件，但禁用了 isolatedModules。原因是 next.js 禁止您禁用 isolatedModules 并将其重置

webpack：在 public 文件夹中编译 web worker

webpack: transpile web workers in public folder

javascript

webpack

next.js

web-worker

webpack-5