代码之家  ›  专栏  ›  技术社区  ›  dotnetCarpenter

将webpack worker loader与nuxt一起使用。js公司

  •  12
  • dotnetCarpenter  · 技术社区  · 6 年前

    我正在尝试在 nuxt.js framework 但不断出现引用错误。 ReferenceError: Worker is not defined

    我已安装 worker-loader 1.1.1 通过npm并将以下规则添加到 nuxt.config.js :

    module.exports = {
      build: {
        extend (config, { isDev, isClient }) {
          if (isDev && isClient) {
            config.module.rules.push({
              enforce: 'pre',
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              exclude: /(node_modules)/
            })
          }
          // Web Worker support
          config.module.rules.push({
            test: /\.worker\.js$/,
            use: { loader: 'worker-loader' },
            exclude: /(node_modules)/
          })
        }
      }
    }
    

    如果我通过创建生成 nuxt build 看起来web worker文件已创建。

    Asset                           Size                      
    2a202b9d805e69831a05.worker.js  632 bytes          [emitted]
    

    我将其导入vuex模块中,如下所示:

    import Worker from '~/assets/js/shared/Loader.worker.js'
    
    console.log(Worker)
    const worker = new Worker // <- this line fails!
    

    在控制台中,我得到了一个创建工作进程的函数:

    ƒ () {
      return new Worker(__webpack_require__.p + "345c16d02e75e9312f73.worker.js");
    }
    

    在worker内部,我只有一些伪代码来查看它是否真的有效:

    const msg = 'world!'
    
    self.addEventListener('message', event => {
      console.log(event.data)
      self.postMessage({ hello: msg })
    })
    
    self.postMessage({ hello: 'from web worker' })
    
    2 回复  |  直到 6 年前
        1
  •  9
  •   Greaka    6 年前

    让我们先解决一些问题:

    • 工人仅在客户端可用->无ssr

    所以要么你需要使用 no ssr component ,或需要将应用程序设置为否 ssr

    有了这些知识,我们将修改 nuxt.config.js 具体如下:

    mode: 'spa',
    build: {
      extend(config, { isDev, isClient }) {
        ...
        // Web Worker support
        if (isClient) {
          config.module.rules.push({
            test: /\.worker\.js$/,
            use: { loader: 'worker-loader' },
            exclude: /(node_modules)/
          })
        }
      }
    }
    

    之后 npm run build npm run start 它应该很有魅力。

    我为您创建了一个repo,它是一个使用worker loader的标准nuxt模板: Github Repo

        2
  •  2
  •   Mihail Malostanidis    6 年前

    使用worker loader the fallback option 但就我个人而言(这就是我正在做的),我只会将通信代码保存在直接工作文件中,导入第二个具有实际工作负载的文件。这样,第二个文件也可以导入服务器端。 最有可能是在分叉线程/线程池中,除非您处于FaaS上下文中,并且您的主线程实际上没有其他事情可做。

    此外,您是否必须在 nuxt.config.js ?对我来说,如果没有它,那就是“窗口未定义”。(在浏览器中,尝试实例化worker时)

    extend(config, ctx) {
        /*
        ** Required for HotModuleReloading to work with worker-loader
        */
        config.output.globalObject = 'this'
    }