[英]Sharing code between TypeScript projects (with React)?
This question: "Cannot find module" error when using TypeScript 3 Project References was somewhat helpful.这个问题: “Cannot find module” error when using TypeScript 3 Project References有点帮助。
So was this one: Project references in TypeScript 3 with separate `outDir`这个也是: TypeScript 3 中的项目引用,带有单独的 `outDir`
But I am still having trouble getting this working efficiently with VSCode and React.但是我仍然无法使用 VSCode 和 React 有效地工作。
Project structure:项目结构:
common tsconfig:常见的 tsconfig:
{
"compilerOptions": {
"declaration": true,
"declarationMap": true,
"rootDir": ".",
"composite": true,
"outDir": "build"
},
"references": []
}
client tsconfig:客户端 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"
}
]
}
server tsconfig服务器 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"
}
]
}
I am using create-react-app in client
.我在
client
使用 create-react-app 。 This has caused compilation issues.这导致了编译问题。 I believe I have solved this with
create-app-rewired
and customize-cra
using this for config-overrides.js
我相信我已经使用
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(),
);
In common, I have created a file index.ts
which exports code from every file.通常,我创建了一个文件
index.ts
,它从每个文件中导出代码。
export * from "./messages/toServer/AuthMessage";
for example.例如。
On the front-end and back-end, I can import code (to use) with a handwritten import statement:在前端和后端,我可以使用手写的导入语句导入代码(使用):
import { AuthMessage } from "../../../common/build/messages/toServer/AuthMessage";
VSCode doesn't give any suggestions, but it accepts the import statement assuming the code is built. VSCode 没有给出任何建议,但它接受假设代码已构建的导入语句。
I run tsc -b -w
in common.我共同运行
tsc -b -w
。 This seems to work with manual imports.这似乎适用于手动导入。
It is possible to have:可能有:
AuthMessage
AuthMessage
等类型时 Guidance here: https://www.typescriptlang.org/docs/handbook/project-references.html#guidance is very confusing.此处的指南: https : //www.typescriptlang.org/docs/handbook/project-references.html#guidance非常令人困惑。 Any help with an explanation here is appreciated.
任何对这里解释的帮助表示赞赏。
Other solutions?其他解决方案?
src
of both projects.src
中。 It's not clean, and I can see some disasters with refactoring and an IDE attempting to re-negotiate import paths if the program is running... Any help is appreciated.任何帮助表示赞赏。
It appears to be working.它似乎正在工作。 The steps I took...
我采取的步骤...
Create a base tsconfig in the project directory.在项目目录中创建基础 tsconfig。 (This is documented)
(这是记录在案)
{
"references": [
{
"path": "./common"
}
],
"files": []
}
Add "extends": "../tsconfig"
to both sub project tsconfigs.将
"extends": "../tsconfig"
到两个子项目 tsconfigs。
export everything from all the files in common/src
.从
common/src
所有文件导出所有内容。 (using /common/index.ts
) Update import paths to the common directory import { ClassName } from "../../common"
(not individual build folders) (使用
/common/index.ts
)将导入路径更新到公共目录import { ClassName } from "../../common"
(不是单个构建文件夹)
Run tsc -b
in non-react projects for compilation.在非反应项目中运行
tsc -b
进行编译。 After very simple initial testing, it looks like my rewired react config just picks up changes to common
.经过非常简单的初始测试,看起来我重新连接的 react 配置只是获取了对
common
更改。 The config-overrides.js
is a necessity. config-overrides.js
是必需的。
This does appear to work in VSCode, however, after testing, I agree auto-import is superior in WebStorm.这似乎在 VSCode 中有效,但是,经过测试,我同意自动导入在 WebStorm 中更胜一筹。
When creating new files in common
, they must be exported in /common/index.ts
WebStorm auto import will give you a clue, VSCode is a little less obvious.在创建
common
新文件时,它们必须导出到/common/index.ts
WebStorm 自动导入会给你一个线索,VSCode 不太明显。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.