我有一个 Node.js 库包(我们称之为“OasisLib”),其中有一个名为TypeGenerator.ts.
TypeGenerator.ts
文件中发生的事情的确切逻辑并不相关。但这需要在构建项目时访问文件系统中的文件。因此,我们曾经let fs = require('fs')向文件系统写入一些附加文件。
let fs = require('fs')
这个 OasisLib 需要在两个不同的 Node.js 模块中使用:
因此,OasisLib 可用于 UI 包和非 UI 包,而TypeGenerator基础库包仅在构建期间在扩展库中需要。我们已将 TypeGenerator 添加到库包中,将其添加为index.ts.
TypeGenerator
index.ts
但是,当我运行 UI 包时,我们在 UI 主页上收到以下错误:
ERROR in ../OasisLib/dist/src/gen/TypeGenerator.js 48:15-28 Module not found: Error: Can't resolve 'fs' in '/Volumes/Code/OasisLib/src/OasisLib/dist/src/gen'
因此,即使我没有在 UI 包中使用该文件,JS 文件也会被编译。
这就是我想弄清楚的。有没有办法从 OasisLib 模块导出 TypeGenerator,以便我可以在 LibExtensions 包中使用它,但不会在 UI 包中引起问题?
或者,我可以在启动 UI React 应用程序时排除特定文件吗?
我尝试将以下内容添加到 OasisUI 但这并没有解决问题:
"exports": { "../OasisLib/dist/src/gen/TypeGenerator.js": { "ignore": true } }, "browser": { "fs": false }
OasisLib 的 Package.json。
{ "name": "@myorg/oasis-lib", "version": "1.0.0", "description": "", "author": "", "license": "UNLICENSED", "main": "dist/index.js", "types": "dist/types/index.d.ts", "scripts": { "clean": "rm -rf dist && rm -rf node_modules", "generate-models": "node ./dist/src/gen/GenerateTypes.js && tsc", "build": "tsc && npm run generate-models", "watch": "tsc -w", "prepublishOnly": "npm run build && npm run test", "test:watch": "vitest", "test": "vitest run --coverage --passWithNoTests", "start": "env-cmd -f .env.staging react-scripts start" }, "files": [ "dist/src/*", "dist/types/*" ], "npm-pretty-much": { "runTest": "never" }, "dependencies": { "ion-js": "^4.3.0" }, "devDependencies": { "@testing-library/jest-dom": "^6.0.1", "@testing-library/react": "^14.1.2", "@types/jest": "*", "@types/node": "^16.18.25", "@vitejs/plugin-react": "^4.0.3", "@vitest/browser": "^0.34.6", "@vitest/coverage-v8": "^0.34.6", "env-cmd": "^10.1.0", "prettier": "2.8.4", "react-scripts": "^5.0.1", "typescript": "^4.9.5", "vite": "^4.4.5", "vitest": "^0.34.6" }, "peerDependencies": { "@types/react": ">=18", "@types/react-dom": ">=18", "react": ">=18", "react-dom": ">=18" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
在这种情况下,您可以尝试使用条件导入来解决这个问题。条件导入允许根据特定条件选择性地导入模块,这样您就可以在不同的环境中选择不同的导入方式。
首先,您可以在 OasisLib 中修改 TypeGenerator.ts 文件,以便它仅在构建过程中需要时才引入文件系统模块。例如:
let fs; if (process.env.NODE_ENV !== 'production') { fs = require('fs'); } // 在需要时使用 fs
这将确保在生产环境中不会引入文件系统模块。
然后,在您的 OasisUI 和 OasisLibExtension 项目中,您可以设置 NODE_ENV 环境变量为 'production',以确保在这些项目中不会引入文件系统模块。
NODE_ENV
'production'
在 OasisUI 中,您可以通过修改 package.json 文件中的启动脚本来设置 NODE_ENV:
package.json
"scripts": { "start": "NODE_ENV=production env-cmd -f .env.staging react-scripts start" }
在 OasisLibExtension 中,您可以通过在命令行中设置 NODE_ENV 环境变量来确保生产环境:
NODE_ENV=production your-command-here
这样做应该可以解决您的问题,因为在生产环境中将不会引入文件系统模块,从而避免了在 UI 包中出现文件系统模块缺失的错误。