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

【问题标题】：How to create react app as a service/package and import it into 'package.json' of another app如何将反应应用程序创建为服务/包并将其导入另一个应用程序的“package.json”
【发布时间】：2020-02-20 19:52:33
【问题描述】：

。

您好，我目前正在 react 中的 monorepo 应用程序中工作。

我需要提取它的一些“组件”和“样式”并创建位于主项目之外的单独模块/包，然后像普通模块一样将它们导入package.json。

初始文件结构和未来提案结构：

 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": ...,
      .....
  }

您是否有任何想法，不仅是技术上的，还有架构上的，或者有任何文档来实现这一点？

【问题讨论】：

你试过github.com/lerna/lerna吗？
并非如此。我刚开始。我愿意接受建议。你用 lerna 做到了吗？

标签： javascript html css reactjs redux

【解决方案1】：

尝试使用 Yarn 工作区，文档here

【讨论】：

【解决方案2】：

根据设计，对于您要创建的每个 React 模块（日历、页脚和样式），您还需要将 index.js 文件添加到结构中。您可以随意命名文件。这是在您的模块需要时将执行的文件。

您只需从 index.js 文件中导出您的组件。在单独的 React 模块的 package.json 文件中，您必须指明在需要或导入该模块时要执行的 JS 文件。为此，您可以为 package.json 中的 main 字段提供文件名

【讨论】：