Импортирование из общей папки из response native

Question

Я создаю 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 

От folowing этого поста: https://blog.callstack.io/a-cure-for-relative-requires-in-react-native-2b263cecf0f6#.4g1o5inru Я добавил файл package.json в общей папку с:

{ "name": "shared" } 

и ловлю мое родное приложение из пакета.json в корневой папке, например:

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

Но для некоторого r eason я получаю следующую ошибку:

Любая идея, что я делаю неправильно или как я могу добиться импорта файлов в своем приложении RN из общей папки, расположенной вверх по течению?

EDIT:
Несколько деталей, о которых я забыл упомянуть.
линия дает мне ошибку является (имена файлов подделкой ...):

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

попытался также добавить имя в package.json (имя = проектируемый-корень) в корневом уровне и импорта, как:

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

Thanks!
Uri

Answer 1

Я в конечном итоге изменить структуру папок, как указано в @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'

Mobile

Здесь я пошел по this post, который в основном говорит:

Какую бы папку, которую вы хотите, чтобы иметь возможность импортировать как root from, добавьте файл package.json с { "name": "FOLDER_NAME" }. Так, чтобы достичь того же импорта, как и в веб-приложение:

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

Где package.json содержимое является:

{ 
    "name": "actions" 
} 

Теперь я могу делать то же импорт, как я сделал в веб-приложение с мобильного файлы приложений.

EDIT

Что касается node_modules, я использую тот же package.json как для Интернета и мобильных устройств. В моем webpack.config у меня есть массив всех пакетов React Native, которые исключены из файла пакета поставщика.

Answer 2

Чтобы разделить код между веб-сайтом и родным, вы должны изменить способ структурирования своих папок.

Первый запуск с новым проектом 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/'; 

Answer 3

Считаете ли вы, что подъемник node_modules?

Кроме того, вы можете использовать lerna для достижения того, чего хотите, вместо самозанятого решения.