【问题标题】：Avoid relative path import hell in react-native?在 react-native 中避免相对路径导入地狱？
【发布时间】：2020-11-12 15:52:05
【问题描述】：

我是来自 vue 背景的 react-native 新手，我讨厌 react 的一件事是必须在我的组件中使用相对路径导入，我发现自己在做类似的事情：

import HomeScreen from '../../components/screens/HomeScreen'

如果我的文件夹结构发生变化，这意味着我将不得不在所有使用该组件的 m 组件中进行搜索和替换，这并不酷而且容易成为开发者地狱。

是否可以像使用节点模块一样使用绝对路径，是否有一个库可以使用别名或类似的，使用 vue 我可以在 app.js 中导入我的组件，例如 Vue.component('home-screen .. .) 我可以使用它们而无需导入。

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

您可以使用名称键添加package.json 文件

{
  "name": "@components"
}

在任何文件夹中，metro 都会识别它。

然后您可以导入为@components/screens/HomeScreen

如果您使用的是 vscode，您可以将 jsconfig.json 文件添加到您的项目根目录以启用导入自动完成。

这是我的：

{
  "compilerOptions": {
    "baseUrl": "",
    "paths": {
      "@components/*": ["src/components/*"],
      "@helper/*": ["src/helper/*"],
      "@actions/*": ["src/actions/*"],
      "@constants/*": ["src/constants/*"],
      "@primitives": ["src/primitives/index.js"],
      "@graphql": ["src/graphql/index.js"],
      "@services/*": ["src/services/*"],
      "@assets/*": ["assets/*"]
    }
  }
}

【讨论】：

【解决方案2】：

简单的方法

使用{"name":"<prefix>"} 将package.json 添加到重要目录，类似于monorepo。

如果你这样做，你也可以考虑把它做成一个完整的 monorepo，因为几乎没有额外的工作

极其复杂的方法

这种方法更容易使用 webpack 解析器等。

在根目录下创建一个metro.config.js，内容如下

module.export = {
    resolver: {
        resolveRequest: (
            context: ResolutionContext,
            moduleName: string,
            platform: string | null
        ) => {
            //...
            return Resolution;
        }
    }
}

解析上下文

分辨率上下文是一个对象，它包含正在运行的分辨率的属性，最重要的是originModulePath，它是要求模块的路径。

分辨率

分辨率是以下任一对象：

{ type: "empty" } 用于空源
{ type: "sourceFile", filePath: string } 用于 JS、JSON 等文件
{ type: "assetFiles", filePaths: string[] } 用于任何其他类型（例如不可 Metro 编译）

对于这种方法，我建议查看metro-resolver's types，因为这种方法的文档很少

【讨论】：