目标是一个 Angular 应用程序,它可以在浏览器中运行并与国际象棋引擎对战。我想将 Stockfish.js 作为 Web Worker 运行。 当使用指向 stockfish.js 文件的 uri 调用 Worker() 构造函数时,Angular 无法编译并出现“模块构建失败”错误。
这是一个全新的 Angular 应用程序,我刚刚开始在浏览器中测试国际象棋引擎。我在跑……
Angular CLI:8.0.3 节点:10.16.0 操作系统: Darwin x64 Angular :8.0.2 国际象棋引擎:来自 NPM 的 Stockfish.js 10.0
作为完整性检查,我提供了一个纯 HTML 和 JS 文件作为 Web Worker 运行 stockfish.js,它运行良好。没有 Typescript 和 Angular 的相同代码。
我没有发现任何人在他们的 Angular 项目中使用像这样的大型第 3 方 NPM 包作为 Web Worker 的例子或问题。
我觉得我遗漏了一些 Angular 编译器不喜欢的 stockfish.js 文件试图对 stockfish.wasm 文件执行的操作。
这段代码是我从 Angular 文档中关于 Web Worker 的部分获得的。我将 stockfish 的路径传递给 Worker() 构造函数。
app/app.component.ts
const worker = new Worker ('../../node_modules/stockfish/src/stockfish.js', { type: 'module' });
worker.onmessage = ({ data }) => {
console.log(`page got message: ${data}`);
};
worker.postMessage('isready');
这是 Angular CLI 生成的配置文件
tsconfig.worker.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/worker",
"lib": [
"es2018",
"webworker"
],
"types": []
},
"include": [
"src/**/*.worker.ts"
]
}
鳕鱼文件结构
node_modules
- stockfish
-src
license.js
stockfish.asm.js
stockfish.js
stockfish.wasm
这是 Angular 编译时出现的错误...
Module build failed (from ./node_modules/worker-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '/Users/nicksugar/Chess/node_modules/stockfish/src'
at factory.create (/Users/nicksugar/Chess/node_modules/webpack/lib/Compilation.js:823:10)
at factory (/Users/nicksugar/Chess/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
at resolver (/Users/nicksugar/Chess/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
at asyncLib.parallel (/Users/nicksugar/Chess/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
at /Users/nicksugar/Chess/node_modules/neo-async/async.js:2830:7
at /Users/nicksugar/Chess/node_modules/neo-async/async.js:6877:13
at normalResolver.resolve (/Users/nicksugar/Chess/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
at doResolve (/Users/nicksugar/Chess/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
at hook.callAsync (/Users/nicksugar/Chess/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
at _fn0 (eval at create (/Users/nicksugar/Chess/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at resolver.doResolve (/Users/nicksugar/Chess/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
at hook.callAsync (/Users/nicksugar/Chess/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
at _fn0 (eval at create (/Users/nicksugar/Chess/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at hook.callAsync (/Users/nicksugar/Chess/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
at _fn0 (eval at create (/Users/nicksugar/Chess/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at resolver.doResolve (/Users/nicksugar/Chess/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)```
最佳答案
尝试安装自定义 Angular 构建器并使用 webpack 禁用 fs
运行 npm i -D @angular-builders/custom-webpack
编辑你的 angular.json
告诉它使用 custom-webpack 模块来扩展你的 webpack.config.js
文件的虚拟配置
创建您的自定义 webpack.config.js
:
module.exports = {
node: {
fs: 'empty'
}
};
参见 this link了解更多详情
关于javascript - 使用 Angular 8 将 NPM 包 Stockfish.js(国际象棋引擎)编译为 Web Worker 时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56719691/
相关文章:
google-kubernetes-engine - 无法将 gsutil 与 GKE 集群的工作负
amazon-web-services - 如何使用单例类解决 AWS 模拟测试
python-3.x - 如何在 Google Cloud Composer 中设置 chromed
python - 在 Python3.7 之前的版本中,应该如何在 argparse-module
sql-server - 在 SQL Server 2016 代理作业中找不到自定义 dll
amazon-web-services - 如何终止到 elb 的 HTTPS 流量并且容器正在运行
spring - hibernate 时存储的 LocalDate 错误