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

Posted 2023-03-05

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

【英文标题】：How to create react app as a service/package and import it into 'package.json' of another app

【发布时间】：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 做到了吗？

【参考方案1】：

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

【参考方案2】：

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

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