关于 web worker 如何打包到一个文件内（同页面的 web worker）。如何将web worker 如何打包

如何将web worker 如何打包到一个文件内也就是如何使用同页面的 web worker，下面我会直接给出答案:

方法一：

直接使用字符串 + blod 对象转换成二进制再生成 URL，让 worker 加载。

  const code = `
  this.onmessage = function(e) {
    const newValue = e.data + 1
    postMessage(newValue)
  }
  `;
  const blob = new Blob([code], { type: "text/javascript" });
  const url = URL.createObjectURL(blob);
  const worker = new Worker(url);
  worker.onmessage = function (e) {
    console.log("new value=>", e.data);
  };
  worker.postMessage(1);

方法二：

和方法一一样，只是不使用字符串当容器。

<!DOCTYPE html>
  <body>
    <script id="worker" type="app/worker">
      addEventListener('message', function () {
        postMessage('some message');
      }, false);
    </script>
  </body>
</html>

上面是一段嵌入网页的脚本，注意必须指定<script>标签的type属性是一个浏览器不认识的值，上例是app/worker。

然后，读取这一段嵌入页面的脚本，用 Worker 来处理。

var blob = new Blob([document.querySelector('#worker').textContent]);
var url = window.URL.createObjectURL(blob);
var worker = new Worker(url);

worker.onmessage = function (e) {
  // e.data === 'some message'
};

上面代码中，先将嵌入网页的脚本代码，转成一个二进制对象，然后为这个二进制对象生成 URL，再让 Worker 加载这个 URL。这样就做到了，主线程和 Worker 的代码都在同一个网页上面。

以上是阮一峰老师博客部分内容。