开发期间的 React 组件 html 预览

Question

我在 github 上找到了一个通用的开源 react 组件，我想在自己的 react 项目中进行修改和使用。该组件位于使用汇总作为捆绑程序的项目中。这是一个非常简单的组件，只有一个文件src/index.tsx。项目中包含rollup.config.js 和tsconfig.json。

我更喜欢 fork 项目并将其修改为自己的存储库并将其包含在我的项目中，而不是仅仅将代码复制到我的项目中。

为了修改组件，我希望能够在进行更改时在 html 页面中看到它，就像在处理 create-react-app 项目时一样。

在仅包含组件的 React 项目中工作时，典型的开发工作流程是什么？如何准确预览更改？

我尝试将另一个 react 应用程序作为组件项目中的子项目并导入父项目的捆绑输出，尽管它编译成功给了我this error，（我怀疑重复反应的问题） .

Answer 1

发布我的解决方案，以防对任何人有帮助。

我想做的是直观地看到我对 react 组件所做的更改。 Storybook 非常适合这一点，但如果组件是汇总包的 github 分支，这可能会很有用。

我最终做的是克隆库并将其在本地导入到我的 react 项目中。例如，如果我的 React 项目是 projects/react-app，而我的组件是 component-project，则在 projects/react-app 中运行 npm install ../component-project。

然后我将这两个项目链接到一个全局版本的 react。这是必要的，因此 react 应用程序和组件包在开发期间都使用相同版本的 react。否则你会在尝试使用钩子时遇到奇怪的错误。

我按照in this answer的步骤解决了这个问题：

1. In Your Application:
a) cd node_modules/react && npm link
b) cd node_modules/react-dom && npm link

2. In Your Library
a) npm link react
b) npm link react-dom

您可以从那里启动您的开发服务器并通过汇总观察更改，并在您在反应组件库中进行更改时查看更改。做出我想要的更改后，我将库发布到 github 包中，以便继续在我的 CD 工作流程中使用。