从反应本机的共享文件夹导入

问题描述：

我正在创建一个monorepo来同时存放我的React网络应用程序和我的React Native应用程序，因为它们共享很多通用代码。从反应本机的共享文件夹导入

我想要得到的设置是：

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

从如下因素这篇文章：https://blog.callstack.io/a-cure-for-relative-requires-in-react-native-2b263cecf0f6#.4g1o5inru我添加了一个文件的package.json到共享文件夹：

{ "name": "shared" }

和我开始我的本地应用程序从根文件夹中的package.json像这样：

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

但是对于某些r eason我得到以下错误：

任何想法我做错了什么或如何我可以实现从上游的共享文件夹中导入我的RN应用程序中的文件？

编辑：
一些细节我忘了提及。
行给我错误的是（假的文件名...）：

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

还试图在根级别中的package.json添加姓名（名称= PROJ根）和进口，如：

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

谢谢！
Uri

你找到了一个解决方案？ –

@HarshaVenkatram结帐我发布的答案 –

答

我最终改变的文件夹结构中@diegopartes表示回答。

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

为此，我做了以下内容：

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

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

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

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

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

我可以做一个import { addTodo } from 'actions/todos'

移动

这里我经过this post基本上说：

要能够导入无论文件夹作为根，添加一个package.json文件与{ "name": "FOLDER_NAME" }。因此，对于实现相同的导入作为Web应用程序：

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

凡package.json内容是：

{ 
    "name": "actions" 
}

现在我可以做同样的进口，因为我从我的移动Web应用程序做应用文件。

编辑

关于node_modules，我用同样的package.json Web和移动。在我的webpack.config中，我有一个所有React Native软件包的数组，这些软件包都从我的供应商软件包文件中排除。

感谢您的回答。今晚会测试这个。 –

比方说，我有一个authActions.js里面的动作文件夹。在authActions.js中，我试图导入react-redux模块。你最好在哪里安装共享组件引用的node_modules。它会在共享目录中，还是会在项目的根目录中。 –

我更新了答案。我用的是同一个的package.json两个，在根目录 –

答

要在web和本机之间共享代码，您应该更改构建文件夹的方式。

首先启动一个新项目react-native init myProject这将为RN应用程序创建默认结构。

myProject 
| 
+-- android 
+-- ios 
+-- index.android.js 
+-- index.ios.js 
...

现在为网络和共享代码创建特定的文件夹。

myProject 
| 
+-- android 
+-- ios 
+-- index.android.js 
+-- index.ios.js 
+-- web 
+-- shared 
----|------ index.js 
...

共享/ index.js

function hi() { 
    return 'hi'; 
} 

module.exports = { 
    hi: hi 
};

index.ios.js

import { hi } from './shared/';

这没有奏效。你试过这个代码吗？ –

你是对的，它错过了'./shared /';'的最后/在'import {hi}加载该文件夹中的index.js。它正在工作，我可以从index.ios.js正确执行hi（） – diegoprates

此方法也存在问题。在您的Web目录中，创建一个简单的代理节点服务器。使用一些核心节点模块。 RN也会为此发出错误。另外，你基本上在这个架构中包含了移动内部的网页，我认为这不是一个好的做法 –

答

你考虑到葫芦node_modules？

而且可以使用lerna达到你想要的，而不是自己编写的解决方案是什么。

从反应本机的共享文件夹导入

相关推荐