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

Posted 2023-03-13

【中文标题】在 TypeScript 项目之间共享代码（使用 React）？

【英文标题】：Sharing code between TypeScript projects (with React)?

【发布时间】：2020-04-20 16:12:06

【问题描述】：

这个问题："Cannot find module" error when using TypeScript 3 Project References 有点帮助。

这个也是：Project references in TypeScript 3 with separate `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-react-app。这导致了编译问题。我相信我已经用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 不提供任何建议，但假设代码已构建，它会接受 import 语句。

我共同运行tsc -b -w。这似乎适用于手动导入。

可能有：

IntelliSense / auto-import 写入AuthMessage等类型时 导入的可用代码。我已经看到支持类型的示例，但代码不是从 common 生成的。未经测试，但我认为这适用于公共目录中的接口 React 的可用性。一些相关的闲聊：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 尝试重新协商导入路径的一些灾难......

感谢任何帮助。

【问题讨论】：

是的，可以进行自动导入，VSCode 的自动导入与神级 webstorms 相比非常糟糕。我建议交换到 Webstorm，我几乎可以保证自动导入会捡起它。您共享的代码是只是键入还是值？

如何处理非反应输出位置？它没有添加到 react index.html

【参考方案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新建文件时，必须在/common/index.ts导出