与网络工作者一起使用require.js的正确方法是什么？

Question

目前，我正在将现有的Web应用移植到require.js。大多数事情似乎都有效，但是使用网络工作者的功能。例如，我有一个工人，在一个单独的JS文件MeshLoader.js定义的，即从一个STL文件加载的3D模型：

importScripts('../lib/three.min.js', '../lib/STLLoader.js'); 

onmessage = function(e) { 
    var blob = e.data; 
    var reader = new FileReaderSync(); 
    readContents(reader.readAsArrayBuffer(blob)); 
}; 

function readContents(contents) { 
    try { 
     var geometry = new THREE.STLLoader().parse(contents); 
    } catch (e) { 
     // error handling 
    } 

    var attributes = {}; 
    // parsing the file is going on here 
    // ... 

    postMessage({ 
      status: 'completed', 
      attributes: attributes, 
    }); 
} 

小备注：STLLoader.js模块是three.js插件限定STLLoader对象，并将它到THREE命名空间。这就是我如何与require.js重写了它：

importScripts('../lib/require.min.js'); 

require({ 
    baseUrl: '../lib' 
}, [ 
    'require', 'three.min', 'stlloader' 
], 
function(require, THREE, STLLoader) { 
    onmessage = function(e) { 
     var blob = e.data; 
     var reader = new FileReaderSync(); 
     readContents(reader.readAsArrayBuffer(blob)); 
    }; 

    function readContents(contents) { 
     try { 
      var geometry = new THREE.STLLoader().parse(contents); 
     } catch (e) { 
      // error handling 
     } 

     var attributes = {}; 
     // same code as in the initial version 
     // ... 

     postMessage({ 
      status: 'completed', 
      attributes: attributes, 
     }); 
    } 

    return onmessage; 
}); 

工人被称为以下方式：

var worker = new Worker('js/workers/MeshLoader.js'); 
worker.postMessage(blob); 
worker.onmessage = function (event) { 
    if (event.data.status == 'completed') { 
     // ... 
    } else if (event.data.status == 'failed') { 
     // ... 
    } else if (event.data.status == 'working') { 
     // ... 
    } 
}; 

所以，问题是，似乎工人不叫的。也许我需要在requirejs.config()部分声明它为模块，然后将该模块作为依赖项添加到其他调用此worker的模块中？

Answer 1

我这样使用它（jsfiddle）：

importScripts("require.js"); 
requirejs.config({ 
    //Lib path 
    baseUrl: '.', 
    // Some specific paths or alternative CDN's 
    paths: { 
     "socket.io": [ 
      "//cdn.socket.io/socket.io-1.3.7", 
      "socket.io.backup"] 
    }, 
    waitSeconds: 20 
}); 


requirejs(["LibName"], (TheLibrary) = > { 
    // code after all is loaded 
    self.onmessage = (msg)=>{ 
    // do stuff 
    TheLibrary.doStuff(msg.data); 
    } 
    // I tend to dispatch some message here 
    self.postMessage("worker_loaded"); 
} 

需要注意的是收到"worker_loaded"，你可以发布消息的工人，因为只有这样的消息将被接受后，才。之前，onmessage回调尚未建立。所以你的主代码应该看起来如下：

var worker = new Worker("myworker.js"); 
worker.onmessage = function(e) { 
    if(e.data=="worker_loaded") { 
    // Tell worker to do some stuff 
    } 
}