快速試用 React 組件的最佳實踐是什么？

Question

我創建了一個具有以下文件夾結構的 React 組件：

我的組件 git 回購

+ dist
+ node_modules
- src
    mycomponent.js
  .env
  .gitignore
  README.md
  index.js
  package.json
  yarn.lock

我的組件可以被其他應用程序使用，只需導入它然后在 JSX 中使用它。 讓我們將以下稱為我的“演示應用程序”，它托管在不同的 git 存儲庫上：

演示應用 git 存儲庫

import React from 'react';
import mycomponent from 'mycomponent';

function() {
  return (
    This is my component
    <mycomponent />
  );
}

在我的組件開發過程中，我需要不斷地編輯代碼，然后測試結果。 顯然，每次更改都推送到 Git 和 NPM 是非常麻煩的，然后在我的演示應用程序中將其拉下以查看結果。 所以我在我的組件存儲庫中創建了一個名為“example”的新文件夾，並在那里添加了一個新應用程序（使用 create-react-app 構建），所以整個 repo 現在看起來像這樣：

帶有示例目錄的 mycomponent git 存儲庫

+ dist
- example
  + node_modules
  - src
      App.js
      index.js
      index.scss
    .env
    README.md
    package.json
    updateAndRun.sh
    yarn.lock
+ node_modules
- src
    mycomponent.js
  .env
  .gitignore
  README.md
  index.js
  package.json
  yarn.lock

example文件夾中的此應用程序導入mycomponent並以與上述相同的方式使用它：

示例/src/App.js

import React from 'react';
import mycomponent from 'mycomponent';

function() {
  return (
    This is my component
    <mycomponent />
  );
}

現在，在開發過程中，我通過$ cd example && yarn start讓示例目錄中的這個應用程序運行。 當我更改我的組件時，例如/src/mycomponent.js然后我 go 到我的示例文件夾並運行updateAndRun.sh腳本。 該腳本如下所示：

示例/updateAndRun.sh

#!/bin/bash

cd .. && yarn run dist && cd example
rm -Rf ./node_modules/mycomponent/dist
cp -r ../dist ./node_modules/mycomponent
cp ../index.js ./node_modules/mycomponent
yarn start

如您所見，它創建了我的組件的新版本，然后將其復制到example目錄中的node_modules文件夾中。 然后我使用$ yarn start重新啟動應用程序。 這使我可以快速嘗試我的組件是否可以在實際應用程序中按預期工作。 不過，這也有一些缺點：

1. 每次我對組件代碼進行更改時，我都必須停止正在運行的示例應用程序，然后手動運行updateAndRun.sh腳本。
2. 手動將文件復制到node_modules感覺不對。

問題

在這里快速嘗試用 React 編寫的組件而不必推/拉到不同的應用程序的最佳實踐是什么？

注意——故事書

我知道故事書。 這里的問題是我無法控制我的組件嵌入的周圍區域。 例如，Storybooks 會在左側創建一個導航欄，有一個整體的淺色主題（我需要深色）和許多其他我不想要的東西。 我希望能夠創建一個自定義應用程序並查看我的組件在其中的外觀和行為。

Answer 1

您可以使用yarn add從磁盤上的文件夾安裝 package。

來自紗線文檔：

yarn add link:/path/to/local/folder將符號鏈接安裝到本地文件系統上的 package。 這對於在 monorepo 環境中開發相關包很有用。

這意味着您可以將存儲庫彼此分開，而無需復制文件，並且仍然可以使用您的組件。