Javascript 使用Angular8将NPM包Stockfish.js（国际象棋引擎）编译为Web工作者时出错

目标是一个角度应用程序，可以运行和发挥对一个象棋引擎在浏览器中。我想以Web工作者的身份运行Stockfish.js。 调用uri指向stockfish.js文件的Worker（）构造函数时，Angular无法编译，出现“模块构建失败”错误

这是一个全新的Angular应用程序，我刚刚开始在浏览器中测试国际象棋引擎。我在跑步

角度CLI:8.0.3 节点：10.16.0 OS:Darwinx64 角度：8.0.2 国际象棋引擎：来自NPM的Stockfish.js10.0

作为一个健全的检查，我作为一个Web工作者提供了一个运行stockfish.JS的简单HTML和JS文件，它运行良好。相同的代码，没有字体和角度

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

我觉得stockfish.js文件试图对stockfish.wasm文件执行的操作缺少了Angular编译器不喜欢的内容

这段代码是我从Angular Docs中获得的，这是关于网络工作者的部分。我将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');

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

模块构建失败（来自./node\u modules/worker plugin/dist/loader.js）：
ModuleNotFoundError:未找到模块：错误：无法解析“/Users/nicksugar/Chess/node_modules/stockfish/src”中的“fs”
在factory.create（/Users/nicksugar/Chess/node_modules/webpack/lib/Compilation.js:823:10）
在工厂（/Users/nicksugar/Chess/node_modules/webpack/lib/NormalModuleFactory.js:397:22）
在解析器中（/Users/nicksugar/Chess/node_modules/webpack/lib/NormalModuleFactory.js:130:21）
异步lib.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
在normalResolver.resolve（/Users/nicksugar/Chess/node_modules/webpack/lib/NormalModuleFactory.js:214:25）
在doResolve（/Users/nicksugar/Chess/node_modules/enhanced resolve/lib/Resolver.js:184:12）
在hook.callAsync（/Users/nicksugar/Chess/node_modules/enhanced resolve/lib/Resolver.js:238:5）
at_fn0（在创建时评估（/Users/nicksugar/Chess/node_modules/tapable/lib/HookCodeFactory.js:33:10），：15:1）
在resolver.doResolve（/Users/nicksugar/Chess/node_modules/enhanced resolve/lib/unsafeccheplugin.js:37:5）
在hook.callAsync（/Users/nicksugar/Chess/node_modules/enhanced resolve/lib/Resolver.js:238:5）
at_fn0（在创建时评估（/Users/nicksugar/Chess/node_modules/tapable/lib/HookCodeFactory.js:33:10），：15:1）
在hook.callAsync（/Users/nicksugar/Chess/node_modules/enhanced resolve/lib/Resolver.js:238:5）
at_fn0（在创建时评估（/Users/nicksugar/Chess/node_modules/tapable/lib/HookCodeFactory.js:33:10），：27:1）
在resolver.doResolve（/Users/nicksugar/Chess/node_modules/enhanced resolve/lib/DescriptionFilePlugin.js:42:38）```

尝试安装自定义angular builder并使用网页包禁用

fs

运行

npm i-D@angular builders/自定义网页

编辑您的

angular.json

，告诉它使用自定义webpack模块用您的

webpack.config.js

文件扩展虚拟配置 创建自定义的

webpack.config.js

：

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

---

有关更多详细信息，请参阅

这很可能是由于tsconfig.worker.json“lib”：[“es2018”，“webworker”]，angular使用webworker lib编译webworker代码，并且不会编译对dom/fs等的任何引用，看起来stockfish在内部使用“fs”，因此失败