时间戳

首页 > 解决方案 > 使用符号链接在多个 React 应用程序之间共享代码

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

问题描述

我目前有两个独立的前端应用程序。一个轻量级的移动客户端和一个重量级的管理面板。两者都是用 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）。

标签： javascriptnode.jsreactjstypescript

解决方案

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

"dependencies": {
  "your-lib": "git+ssh://git@domain.com:name/repo.git",
}

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

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

推荐阅读