javascript - webpack:在公用文件夹中转换 web worker

Question

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

在路径“/workers/**/*.worker.js”下的公用文件夹中有几个网络 worker 脚本

我想知道我是否也可以用 typescript 写它们或者至少使用 babel 将它们转译为 es5(对于旧浏览器)

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

我可以在我的项目中添加一个“workers”文件夹，并使用 webpack 和 next 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 和转译 typescript

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