使用符号链接在多个 React 应用程序之间共享代码

Posted 2023-03-07

【中文标题】使用符号链接在多个 React 应用程序之间共享代码

【英文标题】：Sharing Code between Multiple React Applications with Symlinks

【发布时间】：2020-12-31 15:48:43

【问题描述】：

我目前有两个独立的前端应用程序。一个轻量级的移动客户端和一个重量级的管理面板。两者都是用 CRA 创建的。我们对一切都使用 TypeScript。

目前目录结构如下：

root
├── admin (created using create-react-app)
|   ├── node_modules
|   ├── public
|   ├── src
|   │   └── common (symlink)
│   │   └── index.ts
|   ├── package.json
|   └── tsconfig.json
├── mobile (created using create-react-app)
|   ├── node_modules
|   ├── public
|   ├── src
|   │   └── common (symlink)
│   │   └── index.ts
|   ├── package.json
|   └── tsconfig.json
└── common (linked)
    ├── src
    ├── package.json
    └── tsconfig.json

无论出于何种原因，CRA 都不尊重符号链接。就好像没有文件一样。

是否有经批准的方式来做这样的事情？

现在，我们正在使用另一个脚本将文件复制到两个存储库中。我也尝试使用yarn link，但 Typescript 无法正确解析文件（它一直希望看到 javascript）。

【问题讨论】：

尝试将 common 的内容打包到库中，有简单的解决方案，例如 nx nx.dev/react/getting-started/why-nx

【参考方案1】：

有几种不同的方法。 您可以将其打包为库并将所述库导入到您的项目中。该库可以托管在私有或公共 Git 主机上，并在您的 package.json 中引用 Git URL，就像 NPM 包一样。

"dependencies": 
  "your-lib": "git+ssh://[e-mail]:name/repo.git",

这种方法会强制您推送代码并在每次更改时重新安装。如果您的代码经常发生更改，则可能很难处理。

您还可以使用 Lerna 之类的工具将您的代码库组织到一个多包存储库中。 https://github.com/lerna/lerna

【参考方案2】：

我相信最简单的方法是使用 yarn 工作区 (https://classic.yarnpkg.com/blog/2017/08/02/introducing-workspaces/)，为此你需要在根 package.json 中定义依赖项，像这样

"workspaces": [
    "admin",
    "mobile",
    "common"
]

然后您可以使用 yarn install，它应该可以开箱即用。 在您尝试之前，请取消链接 common，以确保它可以正常工作。

此外，您还需要在 common 包上的 admin 和 mobile 中具有依赖关系。

【参考方案3】：

我正在使用yarn link，它运行良好。不同之处可能在于，我正在完全构建（使用汇总）ts 库（通用）代码。

提示/技巧：

在普通包的tsconfig.json中有"declaration": true 有时如果新的东西没有捡起来，在VSCode中使用Restart TS server 在两个包中运行一些 yarn start 构建监视（对于 tsc-watch 或任何其他构建），这样所有更改都会立即得到 如果ls -ald node_modules/<mypkg> 确实是一个符号链接，则值得检查它，因为任何其他npm install 都可以删除它（纱线似乎更好）