{"id":15018437,"url":"https://github.com/nativescript/worker-loader","last_synced_at":"2025-10-19T16:30:57.722Z","repository":{"id":24253692,"uuid":"99676258","full_name":"NativeScript/worker-loader","owner":"NativeScript","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-07T12:33:05.000Z","size":4532,"stargazers_count":36,"open_issues_count":42,"forks_count":20,"subscribers_count":28,"default_branch":"master","last_synced_at":"2024-10-29T15:51:49.904Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NativeScript.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-08T09:37:36.000Z","updated_at":"2023-01-04T09:15:07.000Z","dependencies_parsed_at":"2023-01-14T00:39:22.817Z","dependency_job_id":null,"html_url":"https://github.com/NativeScript/worker-loader","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fworker-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fworker-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fworker-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fworker-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NativeScript","download_url":"https://codeload.github.com/NativeScript/worker-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237163205,"owners_count":19265227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T19:51:57.967Z","updated_at":"2025-10-19T16:30:52.188Z","avatar_url":"https://github.com/NativeScript.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\r\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\r\n    \u003cimg width=\"200\" height=\"200\" hspace=\"25\" src=\"https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ch1\u003eNativeScript Worker Loader and NativeScriptWorkerPlugin\u003c/h1\u003e\r\n  \u003cp\u003eThis is a fork of the official Worker Loader for Webpack.\u003c/p\u003e \r\n\u003c/div\u003e\r\n\r\n## Install\r\n\r\nYou can install this plugin from npm:\r\n``` bash\r\nnpm i -D nativescript-worker-loader\r\n```\r\n\r\n## Usage in JavaScript projects\r\n\r\n1. Write a worker file:\r\n``` javascript\r\n// app/worker.js\r\nrequire(\"globals\");\r\n\r\nglobal.onmessage = function(msg) {\r\n    console.log(\"Inside JS worker...\");\r\n    global.postMessage(\"JS worker\");\r\n}\r\n```\r\n2. Import the worker file with the webpack loader inlined:\r\n\r\n``` javascript\r\n// app/main.js\r\nconst MyWorker = require(\"nativescript-worker-loader!./worker.js\");\r\n\r\nconst worker = new MyWorker();\r\nworker.postMessage({a: 1});\r\nworker.onmessage = function(event) {...};\r\nworker.addEventListener(\"message\", function(event) {...});\r\n```\r\n\r\n3. Configure your webpack.config.js to use the NativeScriptWorkerPlugin.\r\n\r\n``` javascript\r\n// webpack.config.js\r\nconst { NativeScriptWorkerPlugin } = require(\"nativescript-worker-loader/NativeScriptWorkerPlugin\");\r\n// ...\r\n\r\nmodule.exports = env =\u003e {\r\n    // ...\r\n\r\n    const config = {\r\n        //...\r\n        plugins: [\r\n            new NativeScriptWorkerPlugin(),\r\n            // ...\r\n        ]\r\n    }\r\n}\r\n```\r\n\r\n## Usage in TypeScript projects\r\n\r\n\u003e **Note**: If you write your worker files in plain JS, you can configure your project by following the steps from the previous section. If you need to write them in TS, follow the steps in this section.\r\n\r\n1. Define a custom module for your worker's exports:\r\n\r\n``` typescript\r\n// typings/custom.d.ts\r\ndeclare module \"nativescript-worker-loader!*\" {\r\n  const content: any;\r\n  export = content;\r\n}\r\n```\r\n\r\n2. Add the typings to `references.d.ts`:\r\n``` typescript\r\n// references.d.ts\r\n\r\n/// \u003creference path=\"./typings/custom.d.ts\" /\u003e Workerloader\r\n```\r\n\r\n3. Write a worker file:\r\n\r\n``` typescript\r\n// app/worker.ts\r\nimport \"globals\";\r\n\r\nconst context: Worker = self as any;\r\n\r\ncontext.onmessage = msg =\u003e {\r\n    setTimeout(() =\u003e {\r\n        console.log(\"Inside TS worker...\");\r\n        (\u003cany\u003eglobal).postMessage(\"TS Worker\");\r\n    }, 500)\r\n};\r\n```\r\n\r\n4. Import and use the worker file in the following way:\r\n``` typescript\r\n// app/main.ts\r\nimport * as TsWorker from \"nativescript-worker-loader!./workers/typescript.worker\";\r\n\r\nconst worker = new TsWorker();\r\n```\r\n\r\n5. Configure your webpack.config.js to use the NativeScriptWorkerPlugin.\r\n\r\n``` javascript\r\n// webpack.config.js\r\nconst { NativeScriptWorkerPlugin } = require(\"nativescript-worker-loader/NativeScriptWorkerPlugin\");\r\n// ...\r\n\r\nmodule.exports = env =\u003e {\r\n    // ...\r\n\r\n    const config = {\r\n        //...\r\n        plugins: [\r\n            new NativeScriptWorkerPlugin(),\r\n            // ...\r\n        ]\r\n    }\r\n}\r\n```\r\n\r\n6. **[Angular projects only]** Install `ts-loader`:\r\n\r\n``` bash\r\nnpm i -D ts-loader\r\n```\r\n\r\n7. **[Angular projects only]** Update your webpack.config.js to compile the worker files using `ts-loader` instead of the `ngtools/webpack` loader. The following code assumes that all your worker files are named in the format - ```some-name.worker.ts```. You can use a different naming convention but you have to setup the webpack loaders to also follow it.\r\n\r\n``` javascript\r\n// webpack.config.js\r\n\r\nmodule.exports = env =\u003e {\r\n    // ...\r\n\r\n    const config = {\r\n        //...\r\n        module: {\r\n            rules: [\r\n                // Compile TypeScript files with ahead-of-time compiler.\r\n                {\r\n                    test: /.ts$/, exclude: /.worker.ts$/, use: [\r\n                        \"nativescript-dev-webpack/moduleid-compat-loader\",\r\n                        \"@ngtools/webpack\",\r\n                    ]\r\n                },\r\n\r\n                // Compile Worker files with ts-loader\r\n                { test: /\\.worker.ts$/, loader: \"ts-loader\" },\r\n            ]\r\n        }\r\n    }\r\n}\r\n```\r\n\r\n8. **[Angular projects only]** Update your webpack.config.js to inherit the current `ngCompilerPlugin` to allow the use of shared code.\r\n\r\n``` javascript\r\n// webpack.config.js\r\n\r\nmodule.exports = env =\u003e {\r\n    // ...\r\n\r\n    const config = {\r\n        //...\r\n        plugins: [\r\n            new NativeScriptWorkerPlugin({\r\n                plugins: [ngCompilerPlugin]\r\n            }),\r\n            // ...\r\n        ]\r\n    }\r\n}\r\n```\r\n\r\n## Web workers with/without webpack\r\n\r\nPlease note that the way to spawn a Worker with webpack differs from the way described in the WWW Web Workers' specification (also followed by NativeScript).\r\n\r\nBelow are a few examples on how to use workers for builds with and without webpack.\r\n#### JS worker scripts\r\nIf you wrote your worker scripts in plain JavaScript, you can require them.\r\n\r\nUsage with webpack:\r\n``` ts\r\nconst WorkerScript = require(\"nativescript-worker-loader!./worker-script.js\");\r\nconst worker = new WorkerScript();\r\n```\r\n\r\nUsage without webpack:\r\n\r\n``` ts\r\n// without webpack\r\nconst worker = new Worker(\"./worker-script.js\");\r\n```\r\n\r\nOr you can use the `TNS_WEBPACK` global variable to find out if your app is built with webpack or not:\r\n``` ts\r\nlet worker: Worker;\r\nif (global[\"TNS_WEBPACK\"]) {\r\n    const WorkerScript = require(\"nativescript-worker-loader!./worker-script.js\");\r\n    worker = new WorkerScript();\r\n} else {\r\n    worker = new Worker(\"./worker-script.js\");\r\n}\r\n```\r\n#### TS worker scripts\r\nHowever, if you wrote your worker scripts with TypeScript, you cannot use the same code for both webpack builds and non-webpack builds.\r\n\r\nUsage with webpack:\r\n``` ts\r\nimport * as WorkerScript from \"nativescript-worker-loader!./worker-script\";\r\nconst worker = new WorkerScript();\r\n```\r\n\r\nUsage without webpack:\r\n```ts\r\nconst worker = new Worker(\"./worker-script\");\r\n\r\n```\r\n\r\n## Related docs\r\n\r\n1. [Workers in NativeScript](https://docs.nativescript.org/core-concepts/multithreading-model)\r\n2. [Webpack for NativeScript apps](https://docs.nativescript.org/best-practices/bundling-with-webpack)\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fworker-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript%2Fworker-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fworker-loader/lists"}