我有两个不同的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
文件夹中的任何更改。因此,如果有人有更好的解决方案,那就太好了!!! 最佳答案
您可以在npm link
上执行shared
吗?
这将编译,打包并复制到计算机上的某些位置
然后在cms-client
和my-app
上执行npm link shared
它将在node_modules中创建符号链接,指向本地shared
关于javascript - 在两个React Web项目之间共享代码,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58320177/