Question

我正在尝试在nuxt.js framework内使用Web Worker，但仍然会收到引用错误。 ReferenceError: Worker is not defined。

我已经通过npm安装了worker-loader 1.1.1并将以下规则添加到我的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工作文件。

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!

在控制台中，我得到了一个看起来像创建worker的函数：

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

在工作人员中，我只是有一些虚拟代码，看看它是否真的有效：

const msg = 'world!'

self.addEventListener('message', event => {
  console.log(event.data)
  self.postMessage({ hello: msg })
})

self.postMessage({ hello: 'from web worker' })

Answer 1

让我们先解决一些问题：

工作人员仅在客户端提供 - ＆gt;没有ssr

因此，您需要使用no ssr component，或者需要将应用程序设置为否ssr

有了这些知识，我们将修改我们的`private fun jsonFetch(){ val url = "https://api.coinmarketcap.com/v1/ticker/?limit=0" val baglanti = Request.Builder().url(url).build() val tarayici = OkHttpClient() tarayici.newCall(baglanti).enqueue(object : Callback{ override fun onFailure(call: Call?, e: IOException?) { snackBar("No connection!") } override fun onResponse(call: Call?, response: Response?) { val body = response?.body()?.string() coinList = GsonBuilder().create().fromJson (body,Array<Coin>::class.java) fillList(coinList!!) } }) } fun fillList(c : Array<Coin>){ runOnUiThread { mainView.adapter = MainAdapter(c,this) snackBar("Refreshed Data..") } } override fun onCreateOptionsMenu(menu: Menu): Boolean { // Inflate the menu; this adds items to the action bar if it is present. menuInflater.inflate(R.menu.menu_main, menu) val search = menu.findItem(R.id.search) val searchView = MenuItemCompat.getActionView(search) as SearchView search(searchView) return true } private fun search(searchView: SearchView) { searchView.setOnQueryTextListener(object:SearchView.OnQueryTextListener{ override fun onQueryTextSubmit(query: String): Boolean { return false } override fun onQueryTextChange(sText: String): Boolean { MainAdapter(coinList!!,MainActivity()).filter.filter(sText) return true } }) }，如下所示：

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后，它应该像魅力一样。

我为你创建了一个repo，它是一个标准的nuxt模板，使用了worker-loader：Github Repo

Answer 2

使用worker-loader，有the fallback option，但是就我个人而言（这就是我在做的），我只将通信代码保留在直接的worker文件中，并导入具有实际工作量的第二个文件。这样，第二个文件也可以在服务器端导入。除非您处于FaaS上下文中并且您的主线程实际上无事可做，否则最有可能在分支线程/线程池中。

此外，您是否必须在nuxt.config.js中使用以下内容？对我来说，没有它，那就是“窗口未定义”。（在浏览器中，当尝试实例化worker时）

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

使用带有nuxt.js的webpack worker-loader

2 个答案: