使用符號鏈接在多個 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都可以刪除它（紗線在這方面似乎更好）