简体繁体 English

Create-react-app作为依赖项，类似于故事书

[英]Create-react-app as a dependency, similar to storybook

原文 2019-01-29 13:39:14 1 1 reactjs/ webpack/ create-react-app

I am working on several React projects and would like to create a shared dependency that would display their React components in isolation, similar to Storybook. 我正在研究多个React项目，并希望创建一个共享的依赖项，以独立显示其React组件，类似于Storybook。

I would like: 我想要：

to use create-react-app for this 为此使用create-react-app
to have the app be installed as a package in all my libraries and apps (it would reside in their node_modules) that would be oblivious as to what kind of components it would receive from 'above' 将应用程序作为软件包安装在我所有的库和应用程序中（它将驻留在它们的node_modules中），而对于从“上方”接收的组件类型却不了解
to enable CRA's webpack config to import and compile files outside of the src folder, that is- I would edit the start.js script to look for these files based on the CLI arguments received. 为了使CRA的webpack配置能够导入和编译src文件夹之外的文件，即-我将编辑start.js脚本以根据收到的CLI参数查找这些文件。

I've tried ejecting and changing the weback config file (removing the module scope plugin) and adding a loader that would compile files from two or three folders above, but I always get the same error: 我试过弹出并更改weback配置文件（删除模块作用域插件），并添加了一个加载器，该加载器将编译上面两个或三个文件夹中的文件，但是我总是遇到相同的错误：

You attempted to import ... which falls outside of the project src/ directory.

Is there an easy way to enable compiling outside of src? 有没有一种简单的方法可以在src之外进行编译？

1 个解决方案

My company has used Lerna to create a Monorepo. 我的公司使用Lerna来创建Monorepo。 Our use case was almost identical to yours, if I'm understanding yours correctly. 如果我正确理解了您的用例，那么我们的用例几乎与您的用例相同。

Setting up Lerna wasn't super easy at first. 最初，设置Lerna并非易事。 We used a Yeoman generator to scaffold it, I think (but we might have ended up doing it manually in the end; I don't remember.) 我认为，我们使用了Yeoman生成器对其进行了脚手架（但是最终我们可能最终不得不手动完成它；我不记得了。）

I found this article talking about some of this stuff. 我发现本文谈论的是其中一些内容。