Question

是否可以将jsx文件声明为全局文件或导入目录？例如，代替：

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

只做：

import { Navigation } from 'NavigationService';

我已经看到可以在webpack配置中使用它，但是在create-react-app中看不到该文件。我可以为此使用package.json吗？

Answer 1

您可以使用全局导入来在NODE_PATH='src'文件中设置.env，这是我的解决方案，而不必退出。

.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/
  ...

mono repo方法：

拥有一个内部帮助程序包并像import { Navigation } from 'myproject-helpers/NavigationService';这样导入它可能是一个不错的选择

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

2 个答案: