javascript - Fel vid kompilering av NPM-paketet Stockfish.js (schackmotor) som en Web Worker med Angular8

Målet är en Angular-app som kan köras och spela mot en schackmotor i webbläsaren. Jag vill köra Stockfish.js som en Web Worker. När jag anropar Worker()-konstruktorn med URI:n som pekar på stockfish.js-filen, misslyckas Angular med att kompilera med ett 'Module build failed'-fel.

Det här är en helt ny Angular-app som jag just började testa schackmotorn i webbläsaren. Jag kör...

Angular CLI: 8.0.3 Node: 10.16.0 OS: darwin x64 Angular: 8.0.2 Schackmotor: Stockfish.js 10.0 från NPM

Som en kontroll för förnuftet serverade jag en vanlig HTML- och JS-fil som kör stockfish.js som en Web Worker och den fungerar bra. Samma kod utan Typescript och Angular.

Jag har inte hittat några exempel på, eller problem med, att människor använder ett stort tredjeparts NPM-paket som detta som en Web Worker i sina Angular-projekt.

Jag känner att jag saknar något med vad stockfish.js-filen försöker göra med stockfish.wasm-filen som Angular-kompilatorn inte gillar.

Den här koden fick jag från Angular-dokumentationen, avsnittet om Web Workers. Och jag skickar sökvägen till stockfish till Worker()-konstruktorn.

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');

Detta är konfigurationsfilen som Angular CLI genererade

tsconfig.worker.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "es2018",
      "webworker"
    ],
    "types": []
  },
  "include": [
    "src/**/*.worker.ts"
  ]
}

Stockfish filstruktur

node_modules
 - stockfish
    -src
      license.js
      stockfish.asm.js
      stockfish.js
      stockfish.wasm

Det här är felet jag får när Angular kompilerar...

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

Svar #1

Försök installera en anpassad Angular-builder och med webpack inaktivera fs

kör npm i -D @angular-builders/custom-webpack

redigera din angular.json för att tala om för den att använda custom-webpack-modulen för att utöka den virtuella konfigurationen med din webpack.config.js-fil Skapa din egna webpack.config.js:

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

Se denna länk för mer information