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

Question

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

Answer 1

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

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

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

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

Answer 2

我相信最简单的方法是使用纱线工作区（ https://classic.yarnpkg.com/blog/2017/08/02/introducing-workspaces/ ），为此您需要在根 package.json 中定义依赖项，例如这个

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

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

此外，您需要在admin和mobile对common包具有依赖关系。

Answer 3

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

提示与技巧：

• 在公共包的tsconfig.json有"declaration": true
• 有时如果没有拿起新东西，请在 VSCode 中使用Restart TS server
• 在两个包中都运行一些yarn start build watch（对于tsc-watch或任何其他构建），这样所有更改都会立即被获取
• 可能值得检查ls -ald node_modules/<mypkg>如果它真的是一个符号链接，因为任何其他npm install都可以删除它（纱线在这方面似乎更好）