typescript - ES-version för delad kod mellan React och Express
Jag sätter upp ett monorepo för React frontend (Vite) och Express backend i TypeScript. Jag kan inte göra både React och Express nöjda när jag importerar moduler från ett delat paket, eftersom React använder ESNext och Express använder commonjs för "module" i tsconfig.json. Finns det ett sätt att kringgå detta?
För närvarande har jag satt målet för mitt vanliga paket till ESNext och Express kommer att klaga som SyntaxError: Unexpected token 'export'
Om jag tar bort ESNext-målet kommer Express att bli nöjd men React börjar klaga som The requested module '/@fs/Users/kdk/Desktop/saas-template/shared/dist/models/Example.js' does not provide an export named 'default'
Projektstrukturen ser ut så här
root
| package.json
| tsconfig.json
| frontend
| package.json
| tsconfig.json
|
| backend
| package.json
| tsconfig.json
|
| shared
| package.json
| tsconfig.json
frontend/tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [
{ "path": "./tsconfig.node.json" },
{ "path": "../common" }
]
}
backend/tsconfig.json
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"moduleResolution": "node",
"outDir": "./dist",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
},
"references": [{ "path": "../common" }]
}
common/tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"baseUrl": "../",
"rootDir": "./",
"outDir": "./dist",
"composite": true,
"moduleResolution": "node",
},
"include": ["./**/*"],
"exclude": [
"node_modules",
"./dist/**/*"
],
}