1

我将我的 React 应用程序部署到 Vercel，它一直在工作，直到我添加了一个 web worker 和一个后台任务。

该应用程序仍然可以毫无错误地构建和部署，但是当我访问 url 时，我收到 404 not found 错误。

它仍然在本地运行良好。

我假设这是我使用 React-App-Rewired 设置网络工作者的方式。

我使用 Rewired 来避免“弹出”我的应用程序，它让我创建了一个 config-overrides.js（我认为这是为了覆盖 Webpack 中的默认值）

配置覆盖.js


module.exports = function override(config, env) {
    config.module.rules.push({
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' },
        
      })
 
    return config;
  }

我认为问题在于 Vercel 没有正确找到文件路径。

我尝试了一些方法来解决我在这里找到的问题：https ://github.com/webpack-contrib/worker-loader/issues/176

就像在返回配置之前添加这一行：

   config.output.globalObject = '(self || this)'

看起来使用 Next.js 的人也遇到了类似的问题，他们像这样修复了它：

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.worker\.js$/,
      loader: 'worker-loader',
      options: {
        name: 'static/[hash].worker.js',
        publicPath: '/_next/'
      }
    })

    config.output.globalObject = `(typeof self !== 'undefined' ? self : this)`

    return config
  }
}

但我没有使用 Next。

package.json 脚本。

   "scripts": {
        "predeploy": "npm run build",
        "deploy": "gh-pages -d build",
        "start": "react-app-rewired  start",
        "build": "react-app-rewired  build",
        "test": "react-app-rewired  test --env=jsdom-fourteen",
        "eject": "react-scripts eject"
    },

一张图片，你可以看到我的文件结构（它再次在本地工作，所以我认为一切都设置好了）

在此处输入图像描述

这是我使用 React-App-Rewired 和网络工作者设置的教程：https ://medium.com/@danilog1905/how-to-use-web-workers-with-react-create-app-尝试中不弹出 3718d2a1166b

任何帮助表示赞赏。谢谢！！

4

1 回答 1

0

我需要在我的工作函数的第一行上方添加这一行

/* eslint-disable-next-line no-restricted-globals */



let mytimer;
/* eslint-disable-next-line no-restricted-globals */
self.onmessage = function(evt) {
    clearInterval(mytimer);

      if(evt.data.message === 'pause' || evt.data.message === 'stop' || evt.data.message === 'skip'){
        postMessage(evt.data.time)
      }

    if (evt.data.message == "start" || evt.data.message == "break") {
        var i = evt.data.time;
        mytimer = setInterval(function() {
            i--;
            postMessage(i);
        }, 1000);
        
    } 
  
};

在我的 config-overrides.js 中也有这个

config.output.globalObject = 'this';

module.exports = function override(config, env) {
    config.module.rules.push({
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' },
        
      })
      config.output.globalObject = 'this';
    return config;
  }
于 2021-03-20T23:31:55.443 回答