使用Angular8以Web Worker身份编译NPM包Stockfish.js (象棋引擎)时出错

Question

目标是一个可以在浏览器中运行并与国际象棋引擎对战的Angular应用程序。我想以网络工作者的身份运行Stockfish.js。当使用指向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文件，作为一个网络工作者运行stockfish.js，它运行得很好。没有Typescript和Angular的相同代码。

我没有发现任何例子，或者人们在他们的Angular项目中使用像这样的大型第三方NPM包作为Web工作人员的问题。

我觉得我遗漏了stockfish.js文件试图对Angular编译器不喜欢的stockfish.wasm文件所做的事情。

这是我从Angular Docs中得到的代码，也就是关于Web Workers的部分。我将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"
  ]
}

Stockfish文件结构

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)```

Answer 1

尝试安装自定义angular构建器，并使用webpack禁用fs

运行npm i -D @angular-builders/custom-webpack

编辑您的angular.json，告诉它使用自定义的-webpack模块通过您的webpack.config.js文件扩展虚拟配置创建您的自定义webpack.config.js

module.exports = {
    node: {
        fs: 'empty'
      }
};

有关详细信息，请参阅this link