WebPack 5 和 Web worker 使用 React/Typescript
WebPack 5 with Web worker using React/Typescript
如何让 web worker 与 create-react-app、Typescript 和 Webpack 5 一起工作？文档非常有限，我找不到任何好的解释。我不想使用 webpack-loader 等
我正在使用建议的 webpack 5 实例化 worker API。我已经让它与 ComLink 一起工作，但它使用了我不想要的 RPC（进一步的 ComLink 无法复制套接字或 rxjs 可观察数据结构）。
我想创建 web worker，这样我就可以通过 websockets 传输数据，非常感谢任何指点。
const worker = new Worker(new URL('./test.worker.ts', import.meta.url));
worker.postMessage("test");
但它抛出了以下异常。
Module parse failed: Unexpected token (16:64) File was processed with
these loaders: *
./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js *
./node_modules/babel-loader/lib/index.js You may need an additional
loader to handle the result of these loaders. | |
React.useEffect(() => {
const worker = new Worker(new URL('./test.worker.ts', import.meta.url)); | worker.postMessage("test"); | }, []);
当前 create-react-app 仍在使用 Webpack 4。这就是为什么您的代码无法在当前的 React 设置中运行。
您可以手动弹出和升级 Webpack，但我认为它不会开箱即用，因为它是主要版本升级。
我建议等到 React 18 发布，因为它应该包含 Webpack 5。因为我可以看到版本已经在 create 中更新了-react-app Github repo.
参见here。
如何让 web worker 与 create-react-app、Typescript 和 Webpack 5 一起工作？文档非常有限，我找不到任何好的解释。我不想使用 webpack-loader 等
我正在使用建议的 webpack 5 实例化 worker API。我已经让它与 ComLink 一起工作，但它使用了我不想要的 RPC（进一步的 ComLink 无法复制套接字或 rxjs 可观察数据结构）。
我想创建 web worker，这样我就可以通过 websockets 传输数据，非常感谢任何指点。
const worker = new Worker(new URL('./test.worker.ts', import.meta.url));
worker.postMessage("test");
但它抛出了以下异常。
Module parse failed: Unexpected token (16:64) File was processed with these loaders: * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js * ./node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | |
React.useEffect(() => {const worker = new Worker(new URL('./test.worker.ts', import.meta.url)); | worker.postMessage("test"); | }, []);
当前 create-react-app 仍在使用 Webpack 4。这就是为什么您的代码无法在当前的 React 设置中运行。
您可以手动弹出和升级 Webpack，但我认为它不会开箱即用，因为它是主要版本升级。
我建议等到 React 18 发布，因为它应该包含 Webpack 5。因为我可以看到版本已经在 create 中更新了-react-app Github repo.
参见here。