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

Question

我有两个不同且独立的网络应用程序，都是用 React 开发的。这两个应用程序应该共享一些 React 组件。我想要一个大致的项目结构如下:

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

哪里:

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

我尝试在应用程序的两个 src 文件夹中添加一个符号链接(symbolic link)，例如:

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 文件的自定义配置。现在，我的想法是以某种方式注入(inject) shared 文件夹，但这似乎是不可能的。

我可以编写一个监视 shared 文件夹的 Gulp 脚本，然后复制两个项目的 shared 文件夹中的内容，但这不是最佳选择解决方案并且非常容易出错(在我的 IDE 中，我需要注意正在编辑的三个 shared 文件夹中的哪一个)。此外，标准的 react-scripts 已经在监视 src 文件夹中的任何更改。所以，如果有人有更好的解决方案，那就太好了!!!

Answer 1

你能在你的 shared 上做 npm link 吗？

这将编译、打包并复制到您机器上的某个位置

然后在 cms-client 和 my-app 上执行 npm link shared

它将在 node_modules 中创建指向本地 shared

的符号链接(symbolic link)