共享 React 前端组件 -> 使用 TypeScript 分离项目 -> Visual Studio 2017

IT技术 visual-studio reactjs typescript npm webpack
2021-05-16 09:32:25

我们在 Visual Studio 中有以下项目结构。我们有一个 SharedComponents 项目的原因是因为我们的客户端和管理界面之间共享了很多组件。我们使用特征模式并希望拥有这种项目结构。

/src(.sln)
--/PublicClient
--/Admin
--/SharedComponents

我们的 SharedComponents 项目不是一个Visual Studio Shared Project而是一个,Class Library因为我们使用TypeLite NuGetTypeScript从 .NET 类生成接口。

由于 SharedComponents 项目有自己的package.json,tsconfig.jsontslint.json.

Module agumentation 是这里描述的问题之一:

Typescript 2.6 -> 使用module扩充扩展外部库的类型定义 -> TS2339:属性 '' 在类型 '' 上不存在

webpack-dev-server如果我们更改任何一个项目中的任何内容(包括 SharedComponents),我们不想丢失的一个功能是热重载

我已经阅读了很多关于此的主题,但没有找到任何好的解决方案。

npm link由于移动依赖项而导致构建错误node_modules

https://github.com/npm/npm/issues/10343

https://github.com/facebookincubator/create-react-app/issues/1492

我们不想跳过共享项目并将文件复制到我们的两个项目中。在两个不同的项目中维护相同的组件会很耗时。

如果我们将共享项目开源NPM或使用其他服务,如 NPM 私有modulelinklocalBitsinopia,我们将失去热重载和/或必须单独维护包。

有没有其他人遇到过同样的情况并找到了一个好的解决方案?

1个回答

我们决定将所有前端代码放在一个项目中,然后在那里使用单独的文件夹。这意味着我们只有一个package.json, node_modules,tsconfig.jsontslint.json我们不能在同一个项目中使用 API:s 但因为我们可以使用热重载webpack-dev-server它最终仍然是一个很好的权衡。

然后我们使用了两个单独的webpack.config.js文件,称为webpack.publicclient.config.jswebpack.admin.config.js用于不同的配置。