Question

我一直试图提出一种优雅的解决方案，以在彼此密切相关的两个项目之间共享代码。
我有一个仅包含所有客户端代码的React Web应用程序，还有一个可以运行React Web应用程序的Express应用程序，但它也充当API。因为我在两个项目中都使用Typescript，所以我想重用某些类型。为此，我创建了一个shared项目。

我当前的文件夹结构如下：

网络应用
共享
服务器

现在我想将web-app和server项目链接到我的shared项目，但是有一些限制：

该共享文件夹不应上传到npm。
我必须仍然能够使用Heroku部署所有内容（我相信这排除了npm link）。
我不想退出我的React项目。

我不确定我当前的项目结构是否允许我需要的功能，因此也可以建议其他文件夹结构。

Answer 1

如果您使用create-react-app创建Web应用程序，则可以轻松使用NODE_PATH环境变量来进行绝对导入，而无需创建节点模块。

在根级别（与.env目录的package.json相同的级别）创建web-app文件
将环境变量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

在Typescript React项目和Typescript Express项目之间共享代码

1 个答案:

修复ESLint

修复流程