在两个React Web项目之间共享代码

Question

我有两个不同的Web应用程序，都是用React开发的。这两个应用程序应该共享一些React组件。我想要一个大致的项目结构，如下所示：

.
├── cms-client
├── my-app
└── shared

其中：

• [cms-client和my-app是两个标准的React应用程序；]]
• [shared是一个包含共享组件的文件夹，其他两个应用程序应使用。

我尝试在应用程序的两个src文件夹中添加符号链接，例如：

ln -s ../../shared/ .
在每个应用程序的src文件夹中执行。在这种情况下，当我尝试使用共享组件时，编译失败：

../shared/Example.js
SyntaxError: /my-long-project-path/React/shared/Example.js: Unexpected token (6:12)

  4 |     render() {
  5 |         return (
> 6 |             <div>
    |             ^
  7 |                 <p>I am an Example of Shared Component</p>
  8 |             </div>
  9 |         )
就像它被编译为标准js文件一样，而不是React jsx文件。

因此，我正在尝试使用jsconfig.json文件的自定义配置的另一种方法。现在，我的想法是以某种方式注入shared文件夹，但这似乎是不可能的。

我可以编写一个Gulp脚本来监视shared文件夹，然后将内容复制到两个项目的shared文件夹中，但这不是最佳解决方案，而且很容易出错（从我的IDE，需要注意我正在编辑的三个shared文件夹中的哪一个）。此外，标准react-scripts已经在监视src文件夹进行任何更改。因此，如果有人有更好的解决方案，那就太好了！！

我有两个不同的Web应用程序，都是用React开发的。这两个应用程序应该共享一些React组件。我想要一个大致的项目结构，如下所示：。 ├──cms-client├...

Answer 1

您可以在npm link上执行shared吗？