据我所知，web worker需要写在一个单独的JavaScript文件中，并像这样调用:
new Worker('longrunning.js')
我正在使用闭包编译器来合并和缩小我所有的JavaScript源代码，我不希望将我的worker放在单独的文件中进行分发。有什么办法可以做到吗?
new Worker(function() {
//Long-running work here
});
既然一级函数对JavaScript如此重要，为什么标准的后台工作方式必须从web服务器加载整个其他JavaScript文件呢?
当前回答
近期答案(2018)
你可以使用Greenlet:
移动一个异步函数到它自己的线程中。Workerize的简化单功能版本。
例子:
import greenlet from 'greenlet'
const getName = greenlet(async username => {
const url = `https://api.github.com/users/${username}`
const res = await fetch(url)
const profile = await res.json()
return profile.name
})
console.log(await getName('developit'))
其他回答
使用我的小插件https://github.com/zevero/worker-create
var worker_url = Worker.createURL(function(e){
self.postMessage('Example post from Worker'); //your code here
});
var worker = new Worker(worker_url);
所以我认为我们现在有了另一个很酷的选择，这要感谢ES6中的模板文字。这允许我们省去额外的worker函数(及其奇怪的作用域)，只需将用于worker的代码编写为多行文本，就像我们用来存储文本的情况一样，但实际上不需要使用文档或DOM来实现。例子:
const workerScript = `
self.addEventListener('message', function(e) {
var data = e.data;
console.log('worker recieved: ',data);
self.postMessage('worker added! :'+ addOne(data.value));
self.close();//kills the worker
}, false);
`;
下面是该方法的其余要点。
请注意，我们可以将任何我们想要的额外函数依赖项拉入worker，只需将它们收集到一个数组中，并对每个函数运行. tostring，将它们简化为字符串(只要它们是函数声明就可以工作)，然后将其添加到脚本字符串中。这样，我们就不必导入我们可能已经捆绑到正在编写的代码范围中的脚本。
这个特定版本唯一的缺点是lints无法检测service worker代码(因为它只是一个字符串)，这对于“单独的worker函数方法”来说是一个优势。
网络工作者在完全独立的上下文中操作，就像单个程序一样。
这意味着代码不能以对象的形式从一个上下文中移动到另一个上下文中，因为它们可以通过属于另一个上下文中的闭包引用对象。 这一点尤其重要，因为ECMAScript被设计成一种单线程语言，并且由于web worker在单独的线程中操作，那么您将有执行非线程安全操作的风险。
这再次意味着web工作者需要用源代码形式的代码进行初始化。
WHATWG的规格说明说
如果原点的结果 绝对URL是不一样的 输入脚本的起源，然后抛出 SECURITY_ERR异常。 因此，脚本必须是外部文件 和原来一样的方案 页面:您无法从 data: URL或javascript: URL，和一个 页面无法启动工作 使用http: url脚本。
但不幸的是，它并没有真正解释为什么不允许将带有源代码的字符串传递给构造函数。
一个简单的承诺版本，Function#callAsWorker，它接受一个thisArg和参数(就像call一样)，并返回一个承诺:
Function.prototype.callAsWorker = function (...args) { return new Promise( (resolve, reject) => { const code = `self.onmessage = e => self.postMessage((${this.toString()}).call(...e.data));`, blob = new Blob([code], { type: "text/javascript" }), worker = new Worker(window.URL.createObjectURL(blob)); worker.onmessage = e => (resolve(e.data), worker.terminate()); worker.onerror = e => (reject(e.message), worker.terminate()); worker.postMessage(args); }); } // Demo function add(...nums) { return nums.reduce( (a,b) => a+b ); } // Let the worker execute the above function, with the specified arguments add.callAsWorker(null, 1, 2, 3).then(function (result) { console.log('result: ', result); });
有一些答案，但这里是另一个内联版本。
注意:“self”参数纯粹是为了检测目的而做的修饰，实际的工作代码从第一个大括号开始，self是正常的
inlineWorker ( "hello world",// initial message to send to worker function(self){ // inline worker code. self.onmessage = function (e) { self.postMessage("thinking..."); for (var i=0;i<100000000;i++) { var r = Math.random(); } self.postMessage(e.data.toUpperCase()); } },function(e){ // optional message handler document.getElementById("log").innerHTML= "from worker:"+e.data; }); function inlineWorker (msg,fn,onMsg) { var w=window, U=!!w.webkitURL?w.webkitURL:w.URL, src=fn.toString(), s=src.indexOf('{'), e=src.lastIndexOf('}'), worker = new Worker(U.createObjectURL( new Blob([ src.substring(s+1,e-1) ], { type: "text/javascript" }) )); if (typeof onMsg==="function") { worker.addEventListener("message",onMsg); } if (msg) { worker.postMessage(msg); } return worker; } <div id="log"></div>
