react + hardhat + typechain的适当项目结构

Question

经过一天的努力，让反应和草帽结合住在同一个项目中，我放弃了。冲突的tsConfig和其他一些问题

因此，最终决定将它们保留为一个单独的项目(两个根目录，一个用于react，另一个用于硬帽子)。但是现在我意识到react不允许导入src目录之外的文件。

那么正确的项目设置是什么呢？

Answer 1

我大多数时候看到的是将代码基分离成项目。有些人会在存储库中将它们分开，然后使用NPM依赖项来连接项目。

就我个人而言，在这里，我发现单粒子结构更有用。NPM或Yarn 工作空间和工作区依赖关系将是一个好朋友！

使用monorepo提供的封装，您可以隔离不兼容的工具链。

NounsDAO的单峰就是一个很好的例子。

其前提相当简单，并遵循典型的单峰结构：

1. 使用工作区按技术堆栈分解代码库(例如，将合同与web接口代码分开)
2. 使用工作区导入使跨工作区导入工作(这样您就不会对未解决的导入做出反应，您只需导入另一个包)
3. 在每个工作区中安装您想要的任何专用工具，隔离将防止不同工具链之间的任何不兼容或奇怪的交互。

我们可以在这里使用NounsDAO的单峰作为一个案例研究，这是它们的单层结构的高级视图：

.
├── packages/
│   ├── nouns-api/ (Express API server)
│   │   ├── src/
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   ├── docker-compose.yaml
│   │   └── ...
│   ├── nouns-contracts/ (Solidity contracts, Hardhat + Typechain)
│   │   ├── contracts/
│   │   ├── src/ (
│   │   ├── typechain/
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   ├── .solcover.js
│   │   ├── hardhat.config.js
│   │   └── ...
│   ├── nouns-webapp/ (React webapp)
│   │   ├── public/
│   │   ├── src/ 
│   │   ├── package.json
│   │   └── ...
│   └── ...
├── .eslintrc.js
├── .prettierrc
├── package.json
└── ...

在根目录中，它们有所有常见的工具，如ESLint、更漂亮和基本的类型记录配置。

在每个工作区包中，它们都有完全独立(有时是不兼容)的工具链。如果深入研究它们的package.json文件，就会看到类似于@nouns/...和依赖项的名称遵循这种模式。典型的单人舞！

我可以继续讨论单播节目，但我可能不会在某个博客上说一些还没有说出来的话。在这种情况下，它是一个有用的工具，专门帮助您隔离不兼容的工具链！