如何将反应应用程序创建为服务/包并将其导入另一个应用程序的“package.json”

Question

.

Hi currently im working in a monorepo application in react.

What i need is to extract some of its 'components' & 'styling' and create separate modules/packages that live outside of the main project, and import them into package.json like normal modules.

initial file structure and future proposal structure:

 myMainproject: \src \components component-styles.scss \button \label \list \item....... \modules \calendar \header \footer \support..... package.json.... // I extract calendar, footer modules calendarService: \src \components component-styles.scss \button \label \list \item....... \modules \calendar..... package.json.... footerService: \src \components component-styles.scss \button \label \list \item....... \modules \footer..... package.json.... // Extract style and create a separate service styleService \src \styles..... package.json.... final 'package.json' of 'myMainproject': ...... "dependencies": { "calendarService": ..., "footerService": .... , "styleService": ..., ..... }

Do you have any ideas, not only technical but architectural also, or any doc to achieve that?

Answer 1

Try to use Yarn workspaces, docs here

Answer 2

As per the design, for each of the React Module (Calendar, footer and style) that you want to create you'll also need to add an index.js file to the structure. You can name the file whatever you want. This is the file that will get executed when your module will get required.

You'll just have to export your components from the index.js file. In the package.json file of the separate React modules, you'll have to indicate the JS file that you want to execute when that module is required or imported. You do this by providing the name of the file for the main field in package.json