從反應本機的共享文件夾導入

我正在創建一個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

來源

2016-11-22 Uri Klar

你找到了一個解決方案？ –

@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軟件包的數組，這些軟件包都從我的供應商軟件包文件中排除。

來源

2017-01-10 07:42:56

感謝您的回答。今晚會測試這個。 –

比方說，我有一個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/';

來源

2017-01-09 19:07:31 diegoprates

這沒有奏效。你試過這個代碼嗎？ –

你是對的，它錯過了'./shared /';'的最後/在'import {hi}加載該文件夾中的index.js。它正在工作，我可以從index.ios.js正確執行hi（） – diegoprates

此方法也存在問題。在您的Web目錄中，創建一個簡單的代理節點服務器。使用一些核心節點模塊。 RN也會爲此發出錯誤。另外，你基本上在這個架構中包含了移動內部的網頁，我認爲這不是一個好的做法 –

你考慮到葫蘆node_modules？

而且可以使用lerna達到你想要的，而不是自己編寫的解決方案是什麼。

來源

2017-09-25 05:43:21 Max

從反應本機的共享文件夾導入

回答

相關問題