在 Create React App 中设置用于导入的全局服务

Question

是否可以通过某种方式将 jsx 文件声明为全局文件或导入目录？例如代替：

import { Navigation } from '../../../../../../helpers/NavigationService';

只做：

import { Navigation } from 'NavigationService';

我在 webpack 配置中看到它是可能的，但我在 create-react-app 中没有看到这个文件。我能以某种方式使用 package.json 吗？

Answer 1

您可以在 .env 文件中设置 NODE_PATH='src'，改为使用全局导入，这是我的解决方案，无需弹出。

.env:

NODE_PATH='src'

创建一个文件夹src/services，在里面创建NavigationService，我的例子：

// src/services/NavigationService.js

export class NavigationService {
  static runIt() {
    console.log("Running");
  }
}

在App.js文件中，现在可以直接导入导航服务，使用全局导入，如下：

// src/App.js

// ... import React and others

import { NavigationService } from "services/NavigationService";

class App extends Component {
  componentDidMount() {
    NavigationService.runIt();
  }

   // ... render method
}

如果使用 VsCode，要完成代码，创建 jsconfig.json 文件，包含以下内容：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "services/*": ["./src/services/*"]
    }
  }
}

希望对您有所帮助！

Answer 2

您可以通过三种方式解决您的问题：

NODE_PATH（<- 可能是您要查找的内容）：

您可以定义一个环境变量 NODE_PATH=src/ 然后您可以像这样导入您的服务 import { Navigation } from 'helpers/NavigationService';。它会起作用，但这不是必需的，我认为这是最好的。

无深度嵌套：没有嵌套，首先意味着没有深度嵌套的问题。您可以尝试使用与此类似的文件层次结构：

src/
  /helpers
  /components/
    /componentA/
      componentA
      relatedComponent
      otherRelatedComponent <- no need for nesting
    /componentB/
  ...

单一回购方法：

拥有一个内部帮助程序包并像 import { Navigation } from 'myproject-helpers/NavigationService'; 一样导入它可能是一个很好的折衷方案

在 Create React App 中设置用于导入的全局服务

Set a global service for import in Create React App

javascript

import

reactjs

webpack

create-react-app