时间戳

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

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

问题描述

在此处输入图像描述.

嗨，目前我正在处理一个 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": ...,
      .....
  }

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

标签： javascripthtmlcssreactjsredux

解决方案

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

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

推荐阅读