在 Typescript React 項目和 Typescript Express 項目之間共享代碼

Question

我一直在努力想出一個優雅的解決方案來在兩個彼此密切相關的項目之間共享代碼。
我有一個 React web 應用程序，它只包含所有客戶端代碼，我有一個 Express 應用程序，它為 React web 應用程序提供服務，但它也充當 API。因為我在兩個項目中都使用 Typescript，所以我想重用一些類型。 為此，我創建了一個shared項目。

我目前的文件夾結構如下：

• 網絡應用
• 共享
• 服務器

現在我想將web-app和server項目與我的shared項目鏈接起來，但有一些限制：

1. 此共享文件夾不應上傳至 npm。
2. 我必須仍然能夠使用 Heroku 部署所有內容（我相信這排除了npm link ）。
3. 我不想彈出我的 React 項目。

我不確定我當前的項目結構是否允許我需要的功能，所以請隨意建議其他文件夾結構。

Answer 1

如果要使用create-react-app創建Web應用程序，則可以輕松使用NODE_PATH環境變量來進行絕對導入，而無需創建節點模塊。

1. 在根級別（與web-app目錄的package.json相同的級別）創建一個.env文件package.json
2. 將環境變量NODE_PATH為shared/ （ NODE_PATH=shared/ ）

現在，而不是做類似的事情

import { editUser } from '../../../shared/actions';

您可以使用

import { editUser } from 'shared/actions';

修復ESLint

安裝eslint-plugin-import以防止eslint引發導入錯誤。 並將您的.eslintrc文件更新為

{
    "settings": {
        "import/resolver": {
            "node": {
                "moduleDirectory": ["node_modules", "shared/"]
            }
        }
    }
}

定型流程

將以下內容添加到您的.flowconfig文件中

[options]
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=shared

Answer 2

您可以將 yarn workspaces 用於這種目的，我為這種配置創建了一個最小的工作樣板： https://github.com/rok-tel/ts-express-react

看一下./packages/shared文件夾，它被服務器（express）和客戶端（react）消耗

Answer 3

考慮使用 Nx - https://nx.dev/

這是一個很棒的管理 monorepos 的框架。

• 將他們的 React 應用程序樣板用於客戶端項目
• 使用他們的快遞項目樣板創建 API
• 使用他們的共享代碼 package 樣板創建共享代碼 package

用於創建共享代碼 package 的文檔：

https://nx.dev/l/r/tutorial/07-share-code