从本地反应共享文件夹导入

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

从以下帖子开始：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"

但由于某种原因，我收到以下错误：

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

修改
我忘了提几个细节 给我错误的行是（伪文件名......）：

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

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

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

谢谢！
URI

Answer 1

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

首先从新项目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 2

我最终改变了@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，基本上说：

您希望以root用户身份导入哪个文件夹，添加package.json文件{ "name": "FOLDER_NAME" }。因此，要实现与Web应用程序相同的导入：

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

package.json内容为：

{
  "name": "actions"
}

现在，我可以使用移动应用文件中的Web应用程序执行相同的导入。

修改

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

Answer 3

您是否考虑过提升node_modules？

此外，您可以使用lerna来实现您想要的而不是自编的解决方案。