这个问题：“Cannot find module” error when using TypeScript 3 Project References有点帮助。
这个也是：TypeScript 3 中的项目引用，带有单独的 `outDir`
但是我仍然无法使用 VSCode 和 React 有效地工作。
项目结构：
- 客户/来源
- 常见的
- 服务器/源代码
常见的 tsconfig：
{
"compilerOptions": {
"declaration": true,
"declarationMap": true,
"rootDir": ".",
"composite": true,
"outDir": "build"
},
"references": []
}
客户端 tsconfig：
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
},
"include": [
"src",
],
"references": [
{
"path": "../common"
}
]
}
服务器 tsconfig
{
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"esnext"
],
"module": "commonjs",
"sourceMap": true,
"outDir": "build",
"allowJs": true,
"moduleResolution": "node",
"strict": true,
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"baseUrl": ".",
},
"include": [
"src/**/*"
],
"references": [
{
"path": "../common"
}
]
}
我在client. 这导致了编译问题。我相信我已经解决了这个问题create-app-rewired并将customize-cra其用于config-overrides.js
const { override, removeModuleScopePlugin, getBabelLoader } = require("customize-cra");
const path = require("path");
const addCommon = (config) => {
const loader = getBabelLoader(config, false);
const commonPath = path.normalize(path.join(process.cwd(), "../common")).replace(/\\/g, "\\");
loader.include = [loader.include, commonPath];
return config;
};
module.exports = override(
addCommon,
removeModuleScopePlugin(),
);
通常，我创建了一个文件index.ts，用于从每个文件中导出代码。
export * from "./messages/toServer/AuthMessage";
例如。
在前端和后端，我可以使用手写的导入语句导入代码（使用）：
import { AuthMessage } from "../../../common/build/messages/toServer/AuthMessage";
VSCode 没有给出任何建议，但它接受假设代码已构建的导入语句。
我tsc -b -w共同奔跑。这似乎适用于手动导入。
可能有：
- IntelliSense / auto-import 写入类型时，例如
AuthMessage - 导入的可用代码。我见过支持类型的示例，但代码不是从 common 生成的。未经测试，但我认为这适用于公共目录中的接口
- React 的可用性。一些相关的 jabber：https : //github.com/facebook/create-react-app/issues/6799。ts-loader 支持项目引用，但我不确定 babel-loader 的状态，据我所知，它是 CRA 使用的加载器。我用上面提供的代码得到了部分解决方案。
这里的指导：https : //www.typescriptlang.org/docs/handbook/project-references.html#guidance非常混乱。任何对这里解释的帮助表示赞赏。
其他解决方案？
- 我不想发布和更新私有 NPM module。
- 使用诸如 dsynchronize 之类的程序：http ://dimio.altervista.org/eng/可能更容易，其中代码在两个项目中重复，但包含在
src两个项目中。它不干净，如果程序正在运行，我可以看到重构和 IDE 尝试重新协商导入路径的一些灾难......
任何帮助表示赞赏。