gpt4 book ai didi

reactjs - 在 TypeScript 项目之间共享代码(使用 React)?

转载 作者:行者123 更新时间:2023-12-03 13:52:59 26 4
gpt4 key购买 nike

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

这个也是:Project references in TypeScript 3 with separate `outDir`

但是我仍然无法使用 VSCode 和 React 高效地工作。

项目结构:

  • 客户端/src
  • 常见
  • 服务器/src

通用 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"
}
]
}

我在客户端中使用create-react-app。这导致了编译问题。我相信我已经通过 create-app-rewiredcustomize-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/自动导入 当编写诸如 AuthMessage 之类的类型时
  • 导入的可用代码。我见过支持类型的示例,但代码不是从公共(public)生成的。未经测试,但我想这对于公共(public)目录中的接口(interface)来说效果很好
  • 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很困惑。如有任何解释帮助,我们将不胜感激。

其他解决方案?

  • 我不想发布和更新私有(private) NPM 模块。
  • 使用 dsynchronize 等程序:http://dimio.altervista.org/eng/如果代码在两个项目之间重复,但都包含在两个项目的 src 中,则可能会更容易。它不干净,如果程序正在运行,我可以看到一些重构和 IDE 尝试重新协商导入路径的灾难......

感谢任何帮助。

最佳答案

它似乎正在工作。我采取的步骤...

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

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

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

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

在非 React 项目中运行 tsc -b 进行编译。经过非常简单的初始测试后,看起来我重新连接的 react 配置只是拾取了对 common 的更改。 config-overrides.js 是必需的。

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

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

关于reactjs - 在 TypeScript 项目之间共享代码(使用 React)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59555827/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com