在Scratch3开发中使用@tensorflow/tfjs-node出现编译错误

环境信息 #

• WSL2 上的 Ubuntu-22.04
• Node.js 版本：v21.7.1
• Yarn 版本：1.22.22
• npm 版本：10.5.0

操作步骤 #

1. 进入 scratch-vm 目录执行 yarn add @tensorflow/tfjs-node
2. 执行 yarn install && yarn link
3. 进入 scratch-gui 目录执行 yarn link scratch-vm && yarn install
4. 在 scratch-vm/src/extensions/scratch3_video_sensing/index.js 中添加代码：const tf = require('@tensorflow/tfjs-node')
5. 执行 export NODE_OPTIONS=--openssl-legacy-provider
6. 进入 scratch_gui 目录
7. 执行 yarn start

相关 package.json 配置 #

scratch-vm 的 package.json #

{"name": "scratch-vm","version": "0.2.0","description": "Virtual Machine for Scratch 3.0","author": "Massachusetts Institute of Technology","license": "BSD-3-Clause","homepage": "https://github.com/LLK/scratch-vm#readme","repository": {"type": "git","url": "git+ssh://git@github.com/LLK/scratch-vm.git"},"main": "./dist/node/scratch-vm.js","browser": "./src/index.js","scripts": {"build": "npm run docs && webpack --progress --colors --bail","coverage": "tap ./test/{unit,integration}/*.js --coverage --coverage-report=lcov","deploy": "touch playground/.nojekyll && gh-pages -t -d playground -m \"Build for $(git log --pretty=format:%H -n1)\"","docs": "jsdoc -c .jsdoc.json","i18n:src": "mkdirp translations/core && format-message extract --out-file translations/core/en.json src/extensions/**/index.js","i18n:push": "tx-push-src scratch-editor extensions translations/core/en.json","lint": "eslint . && format-message lint src/**/*.js","prepublish": "in-publish && npm run build || not-in-publish","start": "webpack-dev-server","tap": "tap ./test/{unit,integration}/*.js","tap:unit": "tap ./test/unit/*.js","tap:integration": "tap ./test/integration/*.js","test": "npm run lint && npm run docs && npm run tap","watch": "webpack --progress --colors --watch","version": "json -f package.json -I -e \"this.repository.sha = '$(git log -n1 --pretty=format:%H)'\""},"dependencies": {"@tensorflow/tfjs-node": "^4.17.0","@vernier/godirect": "1.5.0","apollo-cache-inmemory": "^1.6.3","apollo-client": "^2.6.4","apollo-link-http": "^1.5.15","arraybuffer-loader": "^1.0.6","atob": "2.1.2","btoa": "1.2.1","canvas-toBlob": "1.0.0","decode-html": "2.0.0","diff-match-patch": "1.0.4","format-message": "6.2.1","graphql": "^14.5.3","graphql-tag": "^2.10.1","htmlparser2": "3.10.0","immutable": "3.8.1","jszip": "^3.1.5","minilog": "3.1.0","nets": "3.2.0","scratch-parser": "5.0.0","scratch-sb1-converter": "0.2.7","scratch-translate-extension-languages": "0.0.20190416132834","socket.io-client": "2.0.4","sweetalert": "^2.1.2","text-encoding": "0.7.0","worker-loader": "^1.1.1"},"devDependencies": {"@babel/core": "^7.1.2","@babel/preset-env": "^7.1.0","adm-zip": "0.4.11","babel-eslint": "^10.0.1","babel-loader": "^8.0.4","copy-webpack-plugin": "^4.5.4","docdash": "^1.0.0","eslint": "^5.3.0","eslint-config-scratch": "^5.0.0","expose-loader": "0.7.5","file-loader": "^2.0.0","format-message-cli": "6.2.0","gh-pages": "^1.2.0","in-publish": "^2.0.0","jsdoc": "^3.5.5","json": "^10.0.0","lodash.defaultsdeep": "4.6.1","pngjs": "^3.3.2","scratch-audio": "^0.1.0-prerelease.20200528195344","scratch-blocks": "^0.1.0-prerelease.20200804140007","scratch-l10n": "^3.1.20181129221712","scratch-render": "^0.1.0-prerelease.20200806013734","scratch-storage": "^1.1.0","scratch-svg-renderer": "^0.2.0-prerelease.20200610220938","script-loader": "0.7.2","stats.js": "^0.17.0","tap": "^12.0.1","tiny-worker": "^2.1.1","uglifyjs-webpack-plugin": "1.2.7","webpack": "^4.16.5","webpack-cli": "^3.1.0","webpack-dev-server": "^3.1.5"}}

scratch-gui 的 package.json #

{"name": "scratch-gui","version": "0.1.0","description": "GraphicaL User Interface for creating and running Scratch 3.0 projects","main": "./dist/scratch-gui.js","scripts": {"build": "npm run clean && webpack --progress --colors --bail","clean": "rimraf ./build && mkdirp build && rimraf ./dist && mkdirp dist","deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1)\"","prune": "./prune-gh-pages.sh","i18n:push": "tx-push-src scratch-editor interface translations/en.json","i18n:src": "rimraf ./translations/messages/src && babel src > tmp.js && rimraf tmp.js && build-i18n-src ./translations/messages/src ./translations/ && npm run i18n:push","start": "webpack-dev-server","test": "npm run test:lint && npm run test:unit && npm run build && npm run test:integration","test:integration": "jest --runInBand test[\\/]integration","test:lint": "eslint . --ext .js,.jsx","test:unit": "jest test[\\/]unit","test:smoke": "jest --runInBand test[\\/]smoke","watch": "webpack --progress --colors --watch"},"author": "Massachusetts Institute of Technology","license": "BSD-3-Clause","homepage": "https://github.com/LLK/scratch-gui#readme","repository": {"type": "git","url": "git+ssh://git@github.com/LLK/scratch-gui.git"},"peerDependencies": {"react": "^16.0.0","react-dom": "^16.0.0"},"devDependencies": {"@babel/cli": "^7.12.1","@babel/core": "^7.12.3","@babel/plugin-proposal-object-rest-spread": "^7.12.1","@babel/plugin-syntax-dynamic-import": "^7.0.0","@babel/plugin-transform-async-to-generator": "^7.12.1","@babel/preset-env": "^7.12.1","@babel/preset-react": "^7.12.1","arraybuffer-loader": "^1.0.6","autoprefixer": "^9.0.1","babel-core": "7.0.0-bridge.0","babel-eslint": "^10.0.1","babel-loader": "^8.0.4","base64-loader": "1.0.0","bowser": "1.9.4","chromedriver": "76.0.0","classnames": "2.2.6","computed-style-to-inline-style": "3.0.0","copy-webpack-plugin": "^4.5.1","core-js": "2.5.7","css-loader": "^1.0.0","enzyme": "^3.5.0","enzyme-adapter-react-16": "1.3.0","es6-object-assign": "1.1.0","eslint": "^5.0.1","eslint-config-scratch": "^5.0.0","eslint-import-resolver-webpack": "^0.11.1","eslint-plugin-import": "^2.22.1","eslint-plugin-jest": "^22.14.1","eslint-plugin-react": "^7.21.5","file-loader": "2.0.0","get-float-time-domain-data": "0.1.0","get-user-media-promise": "1.1.4","gh-pages": "github:rschamp/gh-pages#publish-branch-to-subfolder","html-webpack-plugin": "^3.2.0","immutable": "3.8.2","intl": "1.2.5","jest": "^21.0.0","js-base64": "2.4.9","keymirror": "0.1.1","lodash.bindall": "4.4.0","lodash.debounce": "4.0.8","lodash.defaultsdeep": "4.6.0","lodash.isequal": "4.5.0","lodash.omit": "4.5.0","lodash.pick": "4.4.0","lodash.throttle": "4.0.1","minilog": "3.1.0","mkdirp": "^0.5.1","omggif": "1.0.9","papaparse": "4.6.2","postcss-import": "^12.0.0","postcss-loader": "^3.0.0","postcss-simple-vars": "^5.0.1","prop-types": "^15.5.10","query-string": "^5.1.1","raf": "^3.4.0","raw-loader": "^0.5.1","react": "16.2.0","react-contextmenu": "2.9.4","react-dom": "16.2.0","react-draggable": "3.0.5","react-ga": "2.5.3","react-intl": "2.9.0","react-modal": "3.9.1","react-popover": "0.5.10","react-redux": "5.0.7","react-responsive": "5.0.0","react-style-proptype": "3.2.2","react-tabs": "2.3.0","react-test-renderer": "16.2.0","react-tooltip": "3.8.0","react-virtualized": "9.20.1","redux": "3.7.2","redux-mock-store": "^1.2.3","redux-throttle": "0.1.1","rimraf": "^2.6.1","scratch-audio": "0.1.0-prerelease.20190114210212","scratch-blocks": "0.1.0-prerelease.1568071968","scratch-l10n": "3.5.20190827223456","scratch-paint": "0.2.0-prerelease.20190822205009","scratch-render": "0.1.0-prerelease.20190904212449","scratch-storage": "1.3.2","scratch-svg-renderer": "0.2.0-prerelease.20201019174008","scratch-vm": "0.2.0-prerelease.20190822194548","selenium-webdriver": "3.6.0","startaudiocontext": "1.2.1","style-loader": "^0.23.0","svg-to-image": "1.1.3","text-encoding": "0.7.0","to-style": "1.3.3","uglifyjs-webpack-plugin": "^1.2.5","wav-encoder": "1.3.0","web-audio-test-api": "^0.5.2","webpack": "^4.44.2","webpack-cli": "^3.1.0","webpack-dev-server": "^3.1.3","xhr": "2.5.0"},"jest": {"setupFiles": ["raf/polyfill","<rootDir>/test/helpers/enzyme-setup.js"],"testPathIgnorePatterns": ["src/test.js"],"moduleNameMapper": {"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js","\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"}}}

错误信息 #

编译过程中出现报错，对应错误截图为 Error_1、Error_2、Error_3

已尝试的解决方案 #

• 在 scratch-vm/webpack.config.js 中配置 webpack-node-externals
• 删除 scratch-vm 和 scratch-gui 的 node_modules 及 yarn.lock 文件，重新执行 yarn install
• 进入 scratch-vm/node_modules/@tensorflow/tfjs-node 目录执行 npm install
• 移除 index.js 中的 const tf = require('@tensorflow/tfjs-node') 语句

执行结果：前三种方案均无法解决编译错误；执行第四种方案后，scratch-gui 执行 yarn start 可成功编译，但无法调用 tf.node.decodePng 等 TensorFlow.js 的 Node.js 专属 API。

内容的提问来源于stack exchange，提问作者daeronhing