共享 React 前端组件 ->使用 TypeScript 分离项目 ->视觉工作室 2017 [英] Shared react front end components -> Separate project with TypeScript -> Visual Studio 2017

问题描述

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

We have the following project structure in Visual Studio. The reason we have a SharedComponents project is because a lot of components are shared between our client and admin interface. We use the feature pattern and would like to have this project structure.

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

我们的 SharedComponents 项目不是 Visual Studio 共享项目 而是一个 类库 因为我们使用 TypeLite NuGet 从 .NET 类生成 TypeScript 接口.

Our SharedComponents project is not a Visual Studio Shared Project but a Class Library because we use TypeLite NuGet to generate TypeScript interfaces from .NET classes.

我们面临很多问题，因为 SharedComponents 项目有自己的 package.json、tsconfig.json 和 tslint.json.

We are facing a lot of problems due to the fact that the SharedComponents project has its own package.json, tsconfig.json and tslint.json.

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

Module agumentation is one of the problems described here:

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

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

One feature that we do not wan't to loose is hot reloading with webpack-dev-server if we change anything in either of the projects, including SharedComponents.

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

I have read a lot of threads about this but not found any good solution.

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

npm link causes build errors due to dependencies in node_modules being moved.

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

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

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

We do not want to skip the shared project and copy the files to both our projects. It would be to time consuming to maintain the same components in two different projects.

如果我们将共享项目开源到 NPM 或使用其他服务，例如NPM 私有模块、linklocal、Bit 或 sinopia 我们将失去热重载和/或必须单独维护包.

If we open source our shared project to NPM or use another service like NPM private modules, linklocal, Bit or sinopia we will loose hot reloading and/or have to maintain the package separately.

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

Has anyone else been in the same situation and found a good solution?

推荐答案

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

We decided to put all our front end code in one project and then use separate folders there. This means we only have one package.json, node_modules, tsconfig.json and tslint.json. We can't have the API:s in the same project but since we can use hot reloading with webpack-dev-serverit was still a good trade off in the end.

然后我们使用了两个独立的 webpack.config.js 文件，分别称为 webpack.publicclient.config.js 和 webpack.admin.config.js> 用于不同的配置.

We then used two separate webpack.config.js files called webpack.publicclient.config.js and webpack.admin.config.js for different configurations.

这篇关于共享 React 前端组件 ->使用 TypeScript 分离项目 ->视觉工作室 2017的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！