javascript - Angular8 ile bir Web Worker olarak NPM paketi Stockfish.js (satranç motoru) derlenirken hata

Hedef, tarayıcıda bir satranç motoruna karşı çalışabilecek ve oynayabilecek bir Angular uygulamasıdır. Stockfish.js'i bir Web Worker olarak çalıştırmak istiyorum. Worker() yapıcısını stockfish.js dosyasına işaret eden URI ile çağırdığımda, Angular 'Module build failed' hatası ile derlemeyi başaramıyor.

Bu, tarayıcıda satranç motorunu test etmeye yeni başladığım yepyeni bir Angular uygulaması. Çalıştırıyorum...

Angular CLI: 8.0.3 Node: 10.16.0 OS: darwin x64 Angular: 8.0.2 Satranç motoru: Stockfish.js 10.0 NPM'den

Bir mantık kontrolü olarak, stockfish.js'i bir Web Worker olarak çalıştıran basit bir HTML ve JS dosyası servis ettim ve sorunsuz çalıştı. Typescript ve Angular olmadan aynı kod.

Angular projelerinde böyle büyük bir üçüncü taraf NPM paketini Web Worker olarak kullanan insanlarla ilgili herhangi bir örnek veya problem bulamadım.

Angular derleyicisinin hoşlanmadığı stockfish.wasm dosyasıyla stockfish.js dosyasının ne yapmaya çalıştığı konusunda bir şeyleri kaçırıyor gibi hissediyorum.

Bu kodu Angular dokümanlarından, Web Worker bölümüden aldım. Ve Worker() yapıcısına stockfish yolunu geçiriyorum.

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

Bu, Angular CLI'nin oluşturduğu yapılandırma dosyasıdır

tsconfig.worker.json

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

Stockfish dosya yapısı

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

Angular derlendiğinde aldığım hata bu...

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

Cevap #1

Özel Angular oluşturucusunu yüklemeyi deneyin ve webpack ile fs öğesini devre dışı bırakın

çalıştır npm i -D @angular-builders/custom-webpack

angular.json dosyanızı, sanal yapılandırmayı webpack.config.js dosyanız ile genişletmek için custom-webpack modülünü kullanmasını söyleyecek şekilde düzenleyin. Özel webpack.config.js dosyanızı oluşturun:

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

Daha fazla detay için bu bağlantıya bakın