如何在turborepo中使用共享的react-native代码

Question

我正在新的 Arch 中使用

react-native

重写我们的

turborepo

应用程序以进行代码共享，因为之前的版本有很多问题。我想做的是拥有以下工作空间

__
  | apps
  |  |__ App1
  |  |__ App2
  |
  | packages
     |__ native-ui

我们的应用程序有很多常用代码，我想将它们添加到

native-ui

文件夹中，这样我们就可以避免重写它。

我尝试的是复制

ui

文件夹并将 package.json 更新为如下所示

{
    "name": "@repo/native-ui",
    "version": "0.0.0",
    "private": true,
    "exports": {
        "./button": "./src/button.tsx",
        "./card": "./src/card.tsx",
        "./code": "./src/code.tsx"
    },
    "scripts": {
        "build": "tsup",
        "dev": "tsup --watch",
        "clean": "rm -rf dist",
        "lint": "eslint . --max-warnings 0",
        "generate:component": "turbo gen react-component"
    },
    "dependencies": {
        "react-native": "0.74.1",
        "tsup": "^8.0.2"
    },
    "devDependencies": {
        "@repo/eslint-config": "workspace:*",
        "@repo/typescript-config": "workspace:*",
        "@turbo/gen": "^1.12.4",
        "@types/eslint": "^8.56.5",
        "@types/node": "^20.11.24",
        "@types/react": "^18.2.0",
        "eslint": "^8.19.0",
        "react": "^18.2.0",
        "typescript": "5.0.4"
    }
}

并将这个新创建的本地包添加到

App1

。 但它抛出以下错误

error: Error: Unable to resolve module @babel/runtime/helpers/interopRequireDefault from packages/native-ui/src/button.tsx: @babel/runtime/helpers/interopRequireDefault could not be found within the project or in these directories:
  ../../packages/native-ui/node_modules
  ../../node_modules
> 1 | import { View, Text } from 'react-native'
    | ^
  2 | import React from 'react'
  3 |
  4 | const Button = () => {
    at ModuleResolver.resolveDependency (node_modules/.pnpm/[email protected]/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:138:15)
    at DependencyGraph.resolveDependency (node_modules/.pnpm/[email protected]/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at node_modules/.pnpm/[email protected]/node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (node_modules/.pnpm/[email protected]/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (node_modules/.pnpm/[email protected]/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 1)
    at async visit (node_modules/.pnpm/[email protected]/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 2)
    at async visit (node_modules/.pnpm/[email protected]/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)

metro 似乎无法解析“react-native”，因为它是一个符号链接。我已经将标志

unstable_enableSymlinks

添加到了 Metro-config。

Answer 1

我使用 Turbo 作为 monorepo 并修改他们的基本示例。我正在使用 NextJS 应用程序和 React Native 应用程序开发一个类似的多应用程序项目。在 packages 文件夹中，我基于基本示例中的 ui 目录创建特定于框架的组件。每个组件库在包内的另一个目录中共享 CSS 和 JavaScript 资源。

长话短说，使用“npx react-native@latest init”让 React Naitve 在像 Turbo 这样的 monorepo 中工作需要一些额外的配置。以下是我让它发挥作用所遵循的步骤。

1. 修改React Naive应用程序内的metro.config.js（例如'my-monorepo/apps/ReactNaitveApp/metro.config.js）。具有以下内容：

   const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

   const 路径 = require('路径'); constworkspaceRoot = path.resolve(__dirname, '../..'); const projectRoot = __dirname;

   const config = getDefaultConfig(projectRoot, {requireConfigFile: false});

   config.watchFolders = [workspaceRoot];

   config.resolver.nodeModulesPaths = [ 路径.resolve(workspaceRoot, 'node_modules'), 路径.resolve(projectRoot, 'node_modules'), ];

   config.resolver.disableHierarchicalLookup = true;

   module.exports = mergeConfig(getDefaultConfig(projectRoot), config);

   2. 在 monorepo 的根目录中安装 @babel/runtime （例如，在根目录中运行“npm i @babel/runtime”）。
   3. 将“babel.config”从“my-monorepo/apps/ReactNaitveApp/”复制到“my-monorepo/”

   我在 Turbo 的 Github 存储库中的一个问题上找到了 Metro-config 修改的代码。到目前为止，它正在工作。