我创建了一个具有以下文件夹结构的 React 组件：
我的组件 git 仓库
+ dist
+ node_modules
- src
mycomponent.js
.env
.gitignore
README.md
index.js
package.json
yarn.lock
我的组件可以被其他应用程序使用，只需导入它然后在 JSX 中使用它。让我们将以下称为我的“演示应用程序”，它托管在不同的 git repo 上：
演示应用程序 git 存储库
import React from 'react';
import mycomponent from 'mycomponent';
function() {
return (
This is my component
<mycomponent />
);
}
在我的组件开发过程中，我需要不断地编辑代码，然后测试结果。很显然，每次改动都推送到 Git 和 NPM 上，然后在我的 demo app 里拉下来看看结果，是很麻烦的。所以我在我的组件存储库中创建了一个名为“example”的新文件夹，并在那里添加了一个新应用程序（使用 create-react-app 构建），所以整个 repo 现在看起来像这样：
带有示例目录的 mycomponent git repo
+ 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我会转到示例文件夹并运行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
如您所见，它创建了我的组件的新版本，然后将其复制到目录node_modules中的文件夹中example。然后我使用重新启动应用程序$ yarn start。这使我可以快速尝试我的组件是否可以在实际应用程序中按预期工作。不过，这也有一些缺点：
- 每次我对组件代码进行更改时，我都必须停止正在运行的示例应用程序，然后
updateAndRun.sh手动运行脚本。 - 手动将文件复制到
node_modules其中感觉不对。
问题
在这里快速尝试用 React 编写的组件而不必推/拉到不同的应用程序的最佳实践是什么？
注意——故事书
我知道故事书。这里的问题是我无法控制我的组件嵌入的周围区域。例如，Storybooks 会在左侧创建一个导航栏，有一个整体的浅色主题（我需要深色）和许多其他我不想要的东西。我希望能够创建一个自定义应用程序并查看我的组件在其中的外观和行为。