在create react app Reactjs应用程序中使用公共Sdk模块共享代码库

在create react app Reactjs应用程序中使用公共Sdk模块共享代码库,reactjs,react-native,babeljs,create-react-app,monorepo,Reactjs,React Native,Babeljs,Create React App,Monorepo,我想开始一个新的应用程序,将有两个网络和本地界面 我决定将所有不依赖于环境的业务代码迁移到第三个包中,即sdk,我可以在react和react native之间共享 所以我的项目现在有4个模块 Web--使用cra创建 Sdk——主要是redux+redux saga+react容器+Hoc 移动-反应本机 服务器-nodejsexpressapi 所有web、移动和服务器都将依赖于Sdk模块 sdk模块将依赖于服务器模块-主要用于导入模拟和数据接口 是否有任何标准方法来实现这种结构 很可能

我想开始一个新的应用程序,将有两个网络和本地界面

我决定将所有不依赖于环境的业务代码迁移到第三个包中,即sdk,我可以在react和react native之间共享

所以我的项目现在有4个模块

  • Web--使用cra创建
  • Sdk——主要是redux+redux saga+react容器+Hoc
  • 移动-反应本机
  • 服务器-nodejsexpressapi

    • 所有web、移动和服务器都将依赖于Sdk模块
    • sdk模块将依赖于服务器模块-主要用于导入模拟和数据接口
  • 是否有任何标准方法来实现这种结构

    很可能我很想去

    • 使用工作区将所有节点模块提升到一个文件夹中,以避免在每个项目中重新安装包
    • 我将在所有4个项目的工作在同一时间,所以我需要hotreload知道这一点
    **我面临的挑战**

  • Cra不会在src文件夹外传输代码,所以尽管我在sdk上进行更改时web项目会刷新QQ。它无法理解es6代码
  • Jest也不理解节点_模块中的es6

  • 在同时处理sdk和web模块时,如何避免重建步骤

    您可以尝试这样的项目结构:

    | package.json
    |- node_modules
    |- Web
     | package.json
    |- SDK
     | package.json
    |- Mobile
     | package.json
    |- Server
     | package.json
    
    然后可以在根文件夹中安装所有内容,并设置NODE_PATH env变量:

    export NODE_PATH='yourdir'/node_modules
    
    听起来对于你正在思考的项目结构来说是一个很好的方法

    您可以有一个
    软件包
    目录,可以在其中添加项目:

    /packages
      - web
      - sdk
      - native
    
    现在,您可以使用
    babel-w
    查看每个包的代码更改,而纱线工作区将负责将它们链接在一起

    如果babel watchers正在运行,您对sdk所做的任何更改都将反映到
    web
    native
    软件包中。您还可以使用类似于使用单个命令启动观察者的东西将所有这些集合在一起

    我与人合著了一个开源库,我们遵循类似的结构,您可以查看。这个项目的不同之处在于,我们的redux逻辑是在一个单独的回购协议中

    为了让jest工作,您可以将
    测试
    env添加到传输模块的
    .babelrc
    文件中。因此,您可以添加两个不同的环境,如传输到commonjs模块的
    test
    ,以及保存es模块的
    es
    环境,以便用户可以利用树抖动


    希望这能给你一个好的起点:)

    你有没有尝试过learna..@RahilAhmad,这无助于解决我上面提到的任何问题>CRA不会将代码传输到src文件夹之外-这对任何人都不是一个挑战,这是对一个非常有限的“hello world”工具的滥用,它不适合现实生活中的用例。而巴别塔config只是其中的一个例子。只需将其弹出,或使用一些覆盖工具(这是对现有工具的又一次攻击)。这无助于解决我上面提到的任何难题。您可以使用Thread工作区在一个文件夹上托管此文件,并从根包进行集中热重新加载。jsonreact不会将代码传输到src文件夹之外。因此,在导入工作区中的任何模块时,您将获得“模块解析失败:意外令牌(16:26)”