webpack：在公共文件夹中转译网络工作者答案

【问题标题】：webpack: transpile web workers in public folderwebpack：在公共文件夹中转译网络工作者
【发布时间】：2022-01-19 21:39:38
【问题描述】：

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

我的公共文件夹中的路径“/workers/**/*.worker.js”下有几个网络工作者脚本

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

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

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

【问题讨论】：

我想你应该可以，为什么不呢！！！当您尝试这样做时遇到了什么问题？
@NalinRanjan 我正在寻找一些资源来阅读并开始学习。我以前从来没有做过这样的事情
Webpack Entry Point.
我建议你尝试想出一个 webpack 配置，从 typescript 源文件生成捆绑包并将它们放在 public/workers 文件夹下。一旦你有了它，然后考虑与现有项目的构建脚本集成。另请注意，在编译应该在webworker 的上下文下运行的打字稿源时，即使打字稿编译器选项也会有所不同，因此请确保将其保存在单独的配置文件中，例如 worker.tsconfig.json.. .
我们可以为ts-loader指定一个custom tsconfig.json文件

标签： javascript webpack next.js web-worker webpack-5

【解决方案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 并将其重置

【讨论】：

这似乎不再适用于 Next.js v12.1.4