{"id":18074,"date":"2023-09-08T15:54:30","date_gmt":"2023-09-08T20:54:30","guid":{"rendered":"http:\/\/carterembry.com\/?p=18074"},"modified":"2025-08-05T09:28:55","modified_gmt":"2025-08-05T14:28:55","slug":"web-workers-react-app-parcel-wo-eject","status":"publish","type":"post","link":"https:\/\/carterembry.com\/de\/2023\/web-workers-react-app-parcel-wo-eject\/%20","title":{"rendered":"Hinzuf\u00fcgen von Web Workern zu create-react-app mit Parcel (Auswerfen nicht erforderlich)"},"content":{"rendered":"
\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\u00dcbersicht\t\t\t\t\t\t<\/h2>\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n<\/div><\/div>
\n
\n\t

Ich habe daran gearbeitet FidgetMap<\/a> schon eine Weile. Ich denke, ich k\u00f6nnte viele Prozesse (einschlie\u00dflich der grundlegenden Renderingschleife) beschleunigen, indem ich Web-ArbeiterInnen<\/a> um einen Gro\u00dfteil der Rendering-Aufgaben asynchron zu erledigen. Das gesamte Spiel wird gezeichnet, indem RGB-Daten in Arrays geschrieben und dann auf eine Leinwand<\/a>Es ist also ein perfekter Kandidat f\u00fcr Web-ArbeiterInnen<\/a>. Es ist ziemlich verr\u00fcckt zu denken, dass es so weit gekommen ist, ohne dass es einen Hintergrund-Thread gab, aber hier sind wir.<\/p>\n

Ich werde keine ganze Geschichtsstunde \u00fcber Web Worker halten, aber es reicht zu sagen, dass ich damit viele Rendering-Aufgaben an einen Hintergrund-Thread (in meinem Fall mehrere Hintergrund-Threads) \u00fcbergeben kann, um den Hauptausf\u00fchrungs-Thread zu entlasten. Das ganze Spiel sollte schneller sein, wenn bestimmte Aufgaben im Hintergrund ausgef\u00fchrt werden.<\/p>\n

Der Hauptteil des Spiels wird direkt auf eine Leinwand<\/a>wie oben erw\u00e4hnt, aber die UI-Steuerelemente wie das Men\u00fc und die interaktiven Schaltfl\u00e4chen sind in React geschrieben. Es macht keinen Sinn, das Rad in Bezug auf Text und Flex-Style-Rendering neu zu erfinden. Also habe ich das Projekt mit create-react-app<\/a> (mit Typescript). Ich m\u00f6chte meine Web Worker im gleichen Stil schreiben, am besten im gleichen Quellcode. Aber du kannst nicht einfach Web-Worker-Module importieren und sie dann zu Workern machen. Du musst einen Worker mit einer URL zu einer separaten JavaScript-Datei (oder einem Bundle) instanziieren.<\/p>\n

CRA ist gro\u00dfartig. Es verbirgt jede Konfiguration und macht es super einfach, ein React-Projekt zu starten. Aber es ist nicht so toll f\u00fcr fortgeschrittene Konfigurationen wie diese, bei denen du deine App in eine JS-Datei und m\u00f6glicherweise mehrere Web Worker in separate Dateien kompilieren musst. Die \u00fcbliche Empfehlung lautet Auswerfen von create-react-app<\/a>. So kannst du nach Bedarf an der Konfiguration herumschrauben, aber mit gro\u00dfer Macht kommt auch gro\u00dfe Verantwortung. Sobald du das Projekt ausgeworfen hast, musst du die Konfiguration und die Skripte selbst pflegen. Es ist nicht mehr so einfach, ein gut getestetes Projekt zu aktualisieren.<\/p>\n

Wie k\u00f6nnen wir also verschiedene Kompilierziele f\u00fcr verschiedene Einstiegspunkte festlegen? Parzelle<\/a> zur Rettung.\u00a0 ParcelJS<\/a> ist ein konfigurationsfreies Build-Tool, das sofort mit Typescript funktioniert. Du sagst einfach: \"Hey Parcel, diese Eingabedatei\", und schon erledigt es die Sache. Genug geredet, ich zeige dir jetzt, wie ich es gemacht habe.<\/p>\n<\/div>\n<\/div><\/div>

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\tDie L\u00f6sung\t\t\t\t\t\t<\/h2>\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n<\/div><\/div>
\n\t\t\t\n\t\t\n\t\t\t<\/span>\n\t\t\tBesuche das Repo mit dieser vollst\u00e4ndigen Demo\t\t<\/span>\n\t\t\t<\/a>\n\t<\/div>\n<\/div><\/div>
\n
\n\t

Fangen wir ganz von vorne an. Verwende create-react-app, um ein neues Projekt mit Typescript zu starten<\/a>. Gehe in dein Projektverzeichnis und erstelle eine neue App wie folgt:<\/p>\n

npx create-react-app workers-example --template typescript<\/pre>\n
Wechsle jetzt in das Verzeichnis und lass uns Parcel installieren<\/p>\n
cd workers-example\nnpm i --save-dev parcel<\/pre>\n
Rad, jetzt arbeiten wir technisch gesehen mit zwei Build-Systemen: dem, das in create-react-app eingebaut ist, und Parcel, das wir gerade hinzugef\u00fcgt haben. Legen wir ein neues Verzeichnis mit dem Namen \"workers\" im Stammverzeichnis des Projekts an. Darin werden wir den Quellcode von workers ablegen. Er befindet sich in einem anderen Verzeichnis als src, da jedes dieser Verzeichnisse ein eigenes kleines Bundle sein wird. Wir werden dort auch einen Beispielworker ablegen.<\/p>\n
mkdir workers\ncd workers\ntouch sampleWorker.ts<\/pre>\n
F\u00fcgen wir etwas in unseren Beispielworker ein, damit wir sehen k\u00f6nnen, dass es funktioniert<\/p>\n
self.onmessage = (e: MessageEvent) => {\n    self.postMessage(\"hallo, Welt vom Worker\");\n};<\/pre>\n
Jetzt f\u00fcgen wir ein neues Skript zu unserer package.json hinzu, damit wir Worker mit npm bauen k\u00f6nnen. Wir werden alle Worker im \u00f6ffentlichen Verzeichnis in einem Unterverzeichnis erstellen, damit unsere App sie von dort aus einfach nutzen kann.<\/p>\n
{\n\/\/ ...Rest der Datei\n  \"Skripte\": {\n    \/\/ ... Rest der Skripte\n    \"worker:build\": \"parcel build --dist-dir public\/workers --\"\n  }\n}<\/pre>\n
Okay, jetzt k\u00f6nnen wir Arbeiter bauen! F\u00fchre dies aus, um die Magie zu sehen:<\/p>\n
npm run worker:build workers\/sampleWorker.ts<\/pre>\n
Parcel wird sampleWorker.ts als Einstiegspunkt verwenden. Es wird erkennen, dass es sich um Typescript handelt und das Richtige tun, ohne dass zus\u00e4tzliche Plugins oder Konfigurationen erforderlich sind. Wenn der Befehl beendet ist, solltest du deinen neu erstellten Worker in public\/workers zusammen mit einer Sourceemap finden. Super!<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div>
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\tSehen Sie es in Aktion\t\t\t\t\t\t<\/h2>\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n<\/div><\/div>
\n
\n\t
Aktualisieren wir die automatische App-Datei, damit wir unseren neuen Worker in Aktion sehen k\u00f6nnen. Kopiere diese Datei und f\u00fcge sie in deine App.tsx ein, um sie mit dem Worker, den wir gebaut haben, zu verbinden.<\/p>\n
\nimport React, { FC, useCallback, useEffect, useRef } from 'react';\n\nconst App: FC = () =&gt; {\n  const workerRef = useRef<worker>();\n\n  const sendMessageToWorker = useCallback(() =&gt; {\n    workerRef.current?.postMessage({});\n  }, []);\n\n  useEffect(() =&gt; {\n    workerRef.current = new Worker("\/workers\/sampleWorker.js");\n\n    workerRef.current?.addEventListener('message', (event) =&gt; {\n      alert('Nachricht vom Worker erhalten: ' + JSON.stringify(event.data));\n    });\n\n    return () =&gt; workerRef.current?.terminate();\n  }, []);\n\n  return (\n    <div>\n      <button type="button" onclick="{sendMessageToWorker}">\n        Nachricht an Arbeiter senden\n      <\/button>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/pre>\n
<\/worker><\/p>\n<\/div>\n<\/div><\/div><\/div>
\"\"<\/a><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\tTaking It Farther - automatisch bauen\t\t\t\t\t\t<\/h2>\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\tBaue die Arbeiter, wenn die App gebaut wird\t\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t<\/div>\n<\/div><\/div>
\n
\n\t
Jetzt k\u00f6nnen wir die Worker auf die einfachste Weise bauen. Es w\u00e4re besser, wenn wir die kompilierten Worker nicht zu unserem Quellcode hinzuf\u00fcgen, sondern sie zusammen mit dem normalen Bundle bauen w\u00fcrden. Das k\u00f6nnen wir ganz einfach erreichen.<\/p>\n
Als Erstes f\u00fcgen wir das \u00f6ffentliche Worker-Verzeichnis (und das Cache-Verzeichnis von parcel) zu unserem .gitignore hinzu, damit wir sie nicht \u00fcbertragen.<\/p>\n
\n\/\/ in .gitignore\n.parcel-cache\npublic\/workers\n<\/pre>\n
Als N\u00e4chstes f\u00fcgen wir einen Befehl hinzu, um alle Worker in deinem Worker-Verzeichnis zu bauen. Zur\u00fcck in package.json...<\/p>\n
{\n\/\/ ...Rest der Datei\n  \"Skripte\": {\n    \/\/ ... Rest der Skripte\n    \"worker:build\": \"parcel build --dist-dir public\/workers --\",\n    \"worker:build:all\": \"npm run worker:build .\/workers\/*\"\n  }\n}<\/pre>\n
Parcel rettet wieder einmal den Tag. Es verwendet jede Datei im Worker-Verzeichnis als Einstiegspunkt und erstellt f\u00fcr jede Datei ein eigenes Bundle. Auf diese Weise kannst du deine Worker vollst\u00e4ndig unterteilen. Jeder kann von node_modules importieren und diese Abh\u00e4ngigkeiten werden Teil des endg\u00fcltigen Bundles f\u00fcr jeden Worker.<\/p>\n
Aber wir wollen keinen separaten Build-Befehl ausf\u00fchren m\u00fcssen. Wir wollen, dass es zusammen mit dem einfachen npm run build ausgef\u00fchrt wird. Das k\u00f6nnen wir erreichen, indem wir ein weiteres Paket namens npm-run-all verwenden. Damit kannst du mehrere npm-Befehle auf einmal ausf\u00fchren, entweder nacheinander oder parallel.<\/p>\n
npm i --save-dev npm-run-all<\/pre>\n
Zur\u00fcck in der package.json verschieben wir den bestehenden Build-Befehl in einen anderen Namen, damit wir den normalen Build-Befehl mehrere Dinge tun lassen k\u00f6nnen<\/p>\n
{\n\/\/ ...Rest der Datei\n  \"Skripte\": {\n    \/\/ ... Rest der Skripte\n    \"build\": \"npm-run-all --sequential workers:build:all rs:build\",\n    \"rs:build\": \"react-scripts build\",\n    \"worker:build\": \"parcel build --dist-dir public\/workers --\",\n    \"worker:build:all\": \"npm run worker:build .\/workers\/*\"\n  }\n}<\/pre>\n
Alles klar! Wenn du jetzt baust, baust du zuerst alle deine Worker und f\u00fchrst dann den normalen react-scripts build aus, der dein create-react-app-Paket erstellt.<\/p>\n
Jetzt kannst du deine vollst\u00e4ndig transpilierten und geb\u00fcndelten Worker \u00fcberall in deinem bestehenden App-Paket verwenden, indem du das tust:<\/p>\n
\n    const worker = new Worker(\"\/workers\/sampleWorker.js\");\n<\/pre>\n<\/div>\n<\/div><\/div>
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\tBaue die Arbeiter in die Entwicklung ein, wenn sie sich ver\u00e4ndern\t\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n<\/div><\/div>
\n
\n\t
Das letzte Teil des Puzzles ist der Aufbau der Worker, wenn du `npm start` ausf\u00fchrst. Parcel hat einen eingebauten \"watch\"-Befehl, aber er setzt voraus, dass deine Datei in einer Umgebung mit einer \"Window\"-Variablen l\u00e4uft, was bei Workern nicht der Fall ist. Deshalb k\u00f6nnen wir unseren eigenen Watcher ganz einfach mit dem Paket `node-watch` implementieren. Installiere es zun\u00e4chst:<\/p>\n
npm i --save-dev node-watch<\/pre>\n
Erstelle nun ein neues Skript namens \"watchWorkers.js\". Ich habe es in ein Unterverzeichnis namens \"scripts\" gelegt. Kopiere dies in watchWorkers.js<\/p>\n
var watch = require('node-watch');\nvar { spawn } = require('child_process');\n\n\/\/ Damit werden die Worker erstellt, wenn das Skript gestartet wird\nspawn(\n    'npm',\n    ['run', 'workers:build'],\n    { stdio: 'inherit' }\n);\nwatch('.\/workers\/', { recursive: true }, function(evt, name) {\n    \/\/ Dies baut jeden einzelnen Worker auf, sobald er aktualisiert wird\n    spawn(\n        'npm',\n        ['run', 'worker:build', name],\n        { stdio: 'inherit' }\n    );\n});\n<\/pre>\n
Jetzt haben wir ein Skript, das jeden Worker neu aufbaut, wenn er sich \u00e4ndert. \u00c4ndern wir die package.json noch einmal, damit sie Teil unseres normalen Prozesses wird<\/p>\n
{\n\/\/ ...Rest der Datei\n  \"Skripte\": {\n    \/\/ ... Rest der Skripte\n    \"start\": \"npm-run-all --parallel workers:watch rs:start\",\n    \"rs:start\": \"react-scripts start\",\n    \"build\": \"npm-run-all --sequential workers:build:all rs:build\",\n    \"rs:build\": \"react-scripts build\",\n    \"worker:build\": \"parcel build --dist-dir public\/workers --\",\n    \"worker:build:all\": \"npm run worker:build .\/workers\/*\",\n    \"workers:watch\": \"node .\/scripts\/watchWorkers.js\"\n  }\n}<\/pre>\n
Wenn du jetzt `npm start` ausf\u00fchrst, wird der normale React-Skript-Start ausgef\u00fchrt, der auf \u00c4nderungen im App-Bundle achtet, aber du f\u00fchrst auch deine eigene Worker-Watch aus, die jeden Worker bei jeder Aktualisierung neu \u00fcbertr\u00e4gt.<\/p>\n<\/div>\n<\/div><\/div>
\n\t\t\t\n\t\t\n\t\t\t<\/span>\n\t\t\tBesuche das Repo mit dieser vollst\u00e4ndigen Demo\t\t<\/span>\n\t\t\t<\/a>\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
Ich arbeite schon seit einer Weile an FidgetMap. Ich glaube, ich k\u00f6nnte viele Prozesse (einschlie\u00dflich der grundlegenden Rendering-Schleife) beschleunigen, indem ich Web Worker hinzuf\u00fcge, die einen Gro\u00dfteil der Rendering-Aufgaben asynchron erledigen. Das ganze Spiel wird gezeichnet, indem RGB-Daten in Arrays geschrieben und dann auf einer Leinwand zusammengesetzt werden, also [...]<\/p>","protected":false},"author":3,"featured_media":21450,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[10,5,7],"tags":[665,841,175,840,838,839],"class_list":["post-18074","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-about-daniel","category-professional-opinions","category-technical-jargon","tag-665","tag-create-react-app","tag-javascript","tag-parcel","tag-typescript","tag-web-worker"],"_links":{"self":[{"href":"https:\/\/carterembry.com\/de\/wp-json\/wp\/v2\/posts\/18074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carterembry.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carterembry.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carterembry.com\/de\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/carterembry.com\/de\/wp-json\/wp\/v2\/comments?post=18074"}],"version-history":[{"count":80,"href":"https:\/\/carterembry.com\/de\/wp-json\/wp\/v2\/posts\/18074\/revisions"}],"predecessor-version":[{"id":21451,"href":"https:\/\/carterembry.com\/de\/wp-json\/wp\/v2\/posts\/18074\/revisions\/21451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carterembry.com\/de\/wp-json\/wp\/v2\/media\/21450"}],"wp:attachment":[{"href":"https:\/\/carterembry.com\/de\/wp-json\/wp\/v2\/media?parent=18074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carterembry.com\/de\/wp-json\/wp\/v2\/categories?post=18074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carterembry.com\/de\/wp-json\/wp\/v2\/tags?post=18074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}