在 TypeScript 项目之间共享代码（使用 React）？

Question

这个问题：“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 模块。
• 使用诸如 dsynchronize 之类的程序：http ://dimio.altervista.org/eng/可能更容易，其中代码在两个项目中重复，但包含在src两个项目中。它不干净，如果程序正在运行，我可以看到重构和 IDE 尝试重新协商导入路径的一些灾难......

任何帮助表示赞赏。

Answer 1

它似乎正在发挥作用。我采取的步骤...

在项目目录中创建一个基本 tsconfig。（这是有记录的）

{
  "references": [
    {
      "path": "./common"
    }
  ],
  "files": []
}

添加"extends": "../tsconfig"到两个子项目 tsconfigs。

导出 中所有文件的所有内容common/src。（使用/common/index.ts）更新公共目录的导入路径import { ClassName } from "../../common"（不是单独的构建文件夹）

tsc -b在非 React 项目中运行进行编译。经过非常简单的初始测试后，看起来我重新连接的反应配置只是接受了对common. 这config-overrides.js是必要的。

这似乎在 VSCode 中有效，但是，经过测试，我同意自动导入在 WebStorm 中更优越。

当在 中创建新文件时common，它们必须在 WebStorm 中导出，/common/index.ts自动导入会给你一个线索，VSCode 不太明显。