英文:
How can I run a worker with dependencies in javascript and sveltekit
问题
我正在尝试在我的项目中使用zxcvbn模块。对于密码长度不超过50个字符的情况，它能够正常工作。但是，当密码长度超过50个字符时，评估每个密码所需的时间太长了。
我尝试使用Worker来运行函数并在Sveltekit中更新状态。代码如下：
// src/generator/+page.svelte
onMount(() => {
const w = new Worker("src/routes/generator/worker");
w.postMessage("password");
w.onmessage = function (event) {
console.log(event.data);
};
});
// src/generator/worker.ts
import zxcvbn from "zxcvbn"; // 报错 "Uncaught SyntaxError: Cannot use import statement outside a module (at worker.ts:1:1)"
const passwordStrength = (password: string) => {
const res = zxcvbn(password);
postMessage(res);
};
self.onmessage = (e) => {
passwordStrength(e.data);
};
我对Sveltekit和JavaScript/TypeScript都不太熟悉，所以欢迎任何建议。
英文:
I am trying to use the module zxcvbn in my project. It is fine for passwords up to around 50 chars. After it takes too long of a time to grade each password.
I'm trying to use workers to run the function and update the state in sveltekit. The code looks like this.
// src/generator/+page.svelte
onMount(() => {
const w = new Worker("src/routes/generator/worker");
w.postMessage("password");
w.onmessage = function (event) {
console.log(event.data);
};
});
// src/generator/worker.ts
import zxcvbn from "zxcvbn"; // throws error "Uncaught SyntaxError: Cannot use import statement outside a module (at worker.ts:1:1)"
const passwordStrength = (password: string) => {
const res = zxcvbn(password);
postMessage(res);
};
self.onmessage = (e) => {
passwordStrength(e.data);
};
I'm new to Sveltekit and javascript/typescript as a whole so any suggestions are welcome.
答案1
得分: 0
你应该在每个使用的 script 标签上添加一个属性 type="module"。查看下面的示例：
<script src="/path/to/your/amazing/script.js" type="module"></script>
英文:
You sould add an attribute type="module" on each script tag you used. Look the example below:
<script src="/path/to/your/amazing/script.js" type="module"></script>
答案2
得分: 0
I ended up importing the worker as such:
// src/generator/+page.svelte
import MyWorker from "src/generator/worker?worker";
const w = new MyWorker();
w.postMessage("password");
w.onmessage = function (event) {
console.log(event.data);
};
// src/generator/worker.ts
import zxcvbn from "zxcvbn";
const passwordStrength = (password: string) => {
const res = zxcvbn(password);
postMessage(res);
};
self.onmessage = (e) => {
passwordStrength(e.data);
};
Vite支持直接导入Worker。然后我可以毫无问题地运行它，而且不会阻塞其他JavaScript。我看到的另一种解决方案是将Worker创建为：
new Worker("/my/path/workerfile?worker", {type: "module"})
免责声明：解决方案/说明可能不是100%正确，因为我仍在学习中。
英文:
I ended up importing the worker as such
// src/generator/+page.svelte
import MyWorker from "src/generator/worker?worker";
const w = new MyWorker();
w.postMessage("password");
w.onmessage = function (event) {
console.log(event.data);
};
// src/generator/worker.ts
import zxcvbn from "zxcvbn";
const passwordStrength = (password: string) => {
const res = zxcvbn(password);
postMessage(res);
};
self.onmessage = (e) => {
passwordStrength(e.data);
};
Vite supports importing the worker directly. Then I could run it with no problem and it wouldn't block other javascript. A different solution I saw was to make the worker like this new Worker("/my/path/workerfile?worker", {type: "module"})
DISCLAIMER: Solution/explanation might not be 100% correct as I am still learning.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论