快速试用 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 构建），所以整个存储库现在看起来像这样：

mycomponent git repo with example dir

+ 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 并以与上述相同的方式使用它：

example/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 然后我转到我的示例文件夹和运行 updateAndRun.sh 脚本。该脚本如下所示：

example/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 重新启动应用程序。这使我能够快速尝试我的组件是否会在实际应用程序中按预期工作。不过这也有一些缺点：

每次更改组件代码时，我都必须停止运行ning 示例应用程序，然后手动运行 updateAndRun.sh 脚本。
手动复制文件到node_modules感觉不对。

问题

快速试用用 React 编写的组件而无需 push/pull 不同应用程序的最佳实践是什么？

注意 – 故事书

我知道故事书。这里的问题是我无法控制我的组件嵌入的周围区域。例如，Storybooks 会在左侧创建一个导航栏，有一个整体的浅色主题（我需要深色）和许多我不想要的其他东西。我希望能够创建自定义应用程序并查看我的组件在其中的外观和行为。

Answer 1

您可以使用 yarn add 从磁盘上的文件夹安装程序包。

来自yarn docs：

yarn add link:/path/to/local/folder installs a symlink to a package that is on your local file system. This is useful to develop related packages in monorepo environments.

这意味着您可以将存储库彼此分开，无需复制文件，并且仍然可以使用您的组件。

快速试用 React 组件的最佳实践是什么？

What's best practice to quickly try out a React component?

javascript

git

testing

reactjs

storybook