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

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


哪里:


cms-clientmy-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文件夹中的任何更改。因此,如果有人有更好的解决方案,那就太好了!!!

最佳答案

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

这将编译,打包并复制到计算机上的某些位置

然后在cms-clientmy-app上执行npm link shared

它将在node_modules中创建符号链接,指向本地shared

关于javascript - 在两个React Web项目之间共享代码,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58320177/

10-11 17:55
查看更多