从本地反应共享文件夹导入 [英] Importing from shared folder from react native

问题描述

我正在创建一个monorepo来保存我的React Web应用程序和我的React Native应用程序，因为它们共享许多常用代码。

我想要获得的设置是：

 项目
 | 
 +  -  web 
 +  -  native 
 ---- | ------ file.js（应该可以从'shared / file2.js'导入）
 +  - 共享
 ---- | ------ file2.js 
 ---- | ------ package.json（名称=共享 ）
 +  -  package.json 
  

从这篇文章开始：

知道我做错了什么，或者我如何从上游的共享文件夹中导入RN应用程序中的文件？

编辑：

我忘记提及的一些细节。

给我的线路错误是（伪文件名......）：

  //在native / file.js 
 import {来自'shared / file2'的aFunctionName} 
  

还尝试在package.json中添加名称（name = proj-root）在根级别并导入如：

 从'proj-root / shared / file2'导入{aFunctionName} 
  

谢谢！

Uri

解决方案

我最终改变了@diegopartes答案中所述的文件夹结构。

此外，我想实现能够使用我的Web和移动目录中的绝对路径从共享文件夹导入的效果。

为此，我做了以下工作：

网络

我将 webpack.config.js 移动到应用程序的根文件夹。在webpack.config.js里面我有以下配置允许我使用绝对路径导入文件：

  const path = require（ '路径'）; 
 const sharedPath = path.join（__ dirname，'shared'）; 
 
 const config = {
 ... 
 resolve：{
 root：[sharedPath]，
}，
 ... 
} 
  

现在我的共享文件夹充当根文件夹。意思是，如果我有

   - 共享
  - 减少者
  - 行动
  -  -  todos.js 
  

我可以从''执行 import {addTodo} actions / todos'

移动

此处我去了这篇文章基本上说：

无论你想以root用户身份导入哪个文件夹，都要添加 package.json 带的文件{name：FOLDER_NAME} 。因此，为了实现与在网络应用程序中相同的导入：

   - 共享
  - 减少者
 -  actions 
 --- todos.js 
 --- package.json 
  

package.json 内容为：

  {
name：actions
} 
  

现在我可以进行相同的导入正如我在移动应用程序文件中的Web应用程序中所做的那样。

编辑

关于 node_modules ，我对网络和移动设备使用相同的 package.json 。在我的 webpack.config 中，我有一个包含所有React Native软件包的数组，这些软件包从我的供应商软件包文件中排除。

I'm in the process of creating a monorepo to hold both my React web app and my React Native app as they share a lot of common code.

The setup i'm trying to get is:

Project  
|  
+-- web  
+-- native  
----|------ file.js (should be able to import from 'shared/file2.js')  
+-- shared  
----|------ file2.js  
----|------ package.json (with name="shared")  
+-- package.json

From folowing this post: https://blog.callstack.io/a-cure-for-relative-requires-in-react-native-2b263cecf0f6#.4g1o5inru I added a package.json file to the shared folder with:

{ "name": "shared" }

and am starting my native app from the package.json in the root folder like so:

"start-native": "./native/node_modules/react-native/packager/packager.sh"

But for some reason i'm getting the following error:

Any idea what i'm doing wrong or how I can achieve importing files in my RN app from a shared folder that is upstream?

EDIT:
A few details I forgot to mention.
The line giving me the error is (fake file names...):

// in native/file.js  
import { aFunctionName } from 'shared/file2'

Also tried adding a name in the package.json (name=proj-root) in the root level and importing like:

import { aFunctionName } from 'proj-root/shared/file2'

Thanks!
Uri

解决方案

I ended up changing the folder structure as stated in @diegopartes answer.

In addition, I wanted to achieve the effect of being able to import from the shared folder using absolute paths from both my web and mobile directories.

For this I did the following:

Web
I moved my webpack.config.js to the root folder of the app. Inside webpack.config.js I have the following configuration the allows me to import files using absolute paths:

const path                = require('path');
const sharedPath          = path.join(__dirname, 'shared');

const config = {
...
resolve: {
    root: [sharedPath],
  },
...
}

now my shared folder acts as a root folder. Meaning, if I have

- shared  
-- reducers  
-- actions  
--- todos.js

I can do an import { addTodo } from 'actions/todos'

Mobile

Here I went by this post which basically says:

Whichever folder you want to be able to import as root from, add a package.json file with { "name": "FOLDER_NAME" }. So for to achieve the same import as in the web app:

- shared  
    -- reducers  
    -- actions  
    --- todos.js
    --- package.json

Where the package.json contents is:

{
  "name": "actions"
}

Now I can do the same import as I did in the web app from my mobile app files.

EDIT

Regarding node_modules, I use the same package.json for both web and mobile. In my webpack.config I have an array of all React Native packages an these are excluded from my vendor bundle file.

这篇关于从本地反应共享文件夹导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！