我想在 Angular 中使用一個庫。（npm 包是立方體以供參考）。這個庫既可以在瀏覽器中運行，也可以在節點中運行，并且兩者都有一些特定的代碼。我希望它在瀏覽器中運行，但 Angular 編譯不起作用，因為它找不到worker_threads. 我詢問了庫所有者，他說預期的解決方案是告訴您的構建系統應該忽略此匯入，因為它僅與代碼的節點變體相關。
但我不知道如何告訴 Angular 這個。我怎么告訴它：請忽略此節點模塊中的此匯入，我們永遠不會到達使用它的代碼？
Error: Can't resolve 'worker_threads' in REDACTED/node_modules/cubing/dist/esm
如果這是不可能的，我想我可以考慮做一個 node_modules 補丁，但我不喜歡這個想法，原因很明顯。而且我聽說很難讓它在生產環境中作業。
作為參考，這是github專案（針對手頭的問題切換到branch scrambles）：https : //github.com/Lykos/cube_trainer.git
這里是最相關的檔案：
包.json：
{
"name": "cube-trainer",
"private": true,
"author": "Bernhard F. Brodowsky",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/Lykos/cube_trainer.git"
},
"engines": {
"node": "16.x",
"npm": "8.x"
},
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --configuration production",
"build_development": "ng build --configuration development",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"test_ci": "ng test --karma-config client/karma-ci.conf.js",
"lint": "ng lint"
},
"dependencies": {
"@angular/animations": "^13.0.2",
"@angular/cdk": "^13.0.2",
"@angular/common": "^13.0.2",
"@angular/compiler": "^13.0.2",
"@angular/core": "^13.0.2",
"@angular/forms": "^13.0.2",
"@angular/material": "^13.0.2",
"@angular/platform-browser": "^13.0.2",
"@angular/platform-browser-dynamic": "^13.0.2",
"@angular/router": "^13.0.2",
"@ngrx/component-store": "^13.0.2",
"@ngrx/effects": "^13.0.2",
"@ngrx/store": "^13.0.2",
"@ngrx/store-devtools": "^13.0.2",
"@rxweb/reactive-form-validators": "^2.1.6",
"actioncable": "^5.2.6",
"angular-token": "^7.0.1",
"cubing": "^0.22.0",
"file-saver": "^2.0.5",
"ngx-cookie-service": "^13.0.1",
"ngx-filesaver": "^12.0.0",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.0.1",
"@angular-eslint/builder": "12.6.1",
"@angular-eslint/eslint-plugin": "12.6.1",
"@angular-eslint/eslint-plugin-template": "12.6.1",
"@angular-eslint/schematics": "12.6.1",
"@angular-eslint/template-parser": "12.6.1",
"@angular/cli": "~13.0.1",
"@angular/compiler-cli": "~13.0.0",
"@ngrx/schematics": "^13.0.2",
"@types/actioncable": "^5.2.7",
"@types/chai": "^4.2.22",
"@types/file-saver": "^2.0.4",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "4.28.2",
"@typescript-eslint/parser": "4.28.2",
"angular-http-server": "^1.10.0",
"chai": "^4.3.4",
"eslint": "^7.26.0",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"karma-mocha": "^2.0.1",
"mocha": "^9.1.3",
"typescript": "~4.4.4"
}
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"cube-trainer": {
"projectType": "application",
"schematics": {
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "client/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "./public",
"index": "client/src/index.html",
"main": "client/src/main.ts",
"polyfills": "client/src/polyfills.ts",
"tsConfig": "client/tsconfig.app.json",
"assets": [
"client/src/favicon.ico",
"client/src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"client/src/styles.css"
],
"scripts": [],
"webWorkerTsConfig": "client/tsconfig.worker.json"
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "4mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "client/src/environments/environment.ts",
"with": "client/src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true,
"outputHashing": "none"
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"proxyConfig": "client/src/proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "cube-trainer:build:production"
},
"development": {
"browserTarget": "cube-trainer:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "cube-trainer:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "client/src/test.ts",
"polyfills": "client/src/polyfills.ts",
"tsConfig": "client/tsconfig.spec.json",
"karmaConfig": "client/karma.conf.js",
"assets": [
"client/src/favicon.ico",
"client/src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"client/src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"client/src/**/*.ts",
"client/src/**/*.html"
]
}
}
}
}
},
"defaultProject": "cube-trainer",
"cli": {
"defaultCollection": "@ngrx/schematics"
}
}
組態檔
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "src/",
"paths": {
"@environment": ["environments/environment"],
"@shared/*": ["app/shared/*"],
"@utils/*": ["app/utils/*"],
"@store/*": ["app/store/*"],
"@effects/*": ["app/effects/*"],
"@core/*": ["app/core/*"],
"@training/*": ["app/training/*"]
},
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2017",
"module": "es2020",
"lib": [
"es2020",
"dom"
],
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noUnusedLocals": true,
"noImplicitThis": true,
"noImplicitReturns": true,
"strict": true,
"skipLibCheck": true
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
tsconfig.app.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
uj5u.com熱心網友回復：
看起來您可以在 tsconfig 或 angular.json 中排除它，也許兩者都嘗試？
從 Angular 2 的構建中排除檔案
// tsconfig
{
"exclude": [
"node_modules/thepath/tothedependency/orfile/using/worker_threads/I_guess",
]
}
// angular.json
...
"configurations": {
"production": {
"assets": [
{
"ignore": [
"**/test.json",
"**/test"
],
},
...
類似的東西
您還可以為 worker_threads 安裝瀏覽器包裝器，然后配置 angular build / webpack 以將舊匯入替換為新匯入。
如果您決定修補它，它可能不會太糟糕。在 github 上 fork 并從你的 github fork 安裝非常簡單。或者為更改保存一個 git 補丁檔案并在安裝步驟中自動應用該補丁也不是瘋狂的。
這種事情通常很麻煩，在 esbuild 和 rollup 以及其他東西中也是如此。
您還可以修改您的 webpack 配置，我認為 ng build 正在使用它，它可能在/node_modules/angular/somejunk/config/webpack.config.json或其他內容中并添加以下內容：
Webpack 忽略匯入
module.exports = {
//...
externals: {
fetch: 'cross-fetch'
}
};
但是然后你又回到了應用補丁或使用 git 分支
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/403699.html
標籤：
上一篇：Angular12RxJsBehaviourSubject和HTTPGet請求問題
下一篇：Angular-如何使用switchMap（合并兩個服務器回應）從WordpressRESTAPI獲取帖子和標簽名稱？