我正在新的 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。
我使用 Turbo 作为 monorepo 并修改他们的基本示例。我正在使用 NextJS 应用程序和 React Native 应用程序开发一个类似的多应用程序项目。在 packages 文件夹中,我基于基本示例中的 ui 目录创建特定于框架的组件。每个组件库在包内的另一个目录中共享 CSS 和 JavaScript 资源。
长话短说,使用“npx react-native@latest init”让 React Naitve 在像 Turbo 这样的 monorepo 中工作需要一些额外的配置。以下是我让它发挥作用所遵循的步骤。
修改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);
我在 Turbo 的 Github 存储库中的一个问题上找到了 Metro-config 修改的代码。到目前为止,它正在工作。