Установите глобальный сервис для импорта в приложении Create React

Question

Можно ли как-то объявить файл jsx как глобальный файл или каталог для импорта?Например, вместо:

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

сделать просто:

import { Navigation } from 'NavigationService';

Я видел, что это возможно в конфигурации веб-пакета, но я не вижу этот файл в create-реагировать-приложение,Можно ли как-то использовать package.json для этого?

Answer 1

Существует три способа решения вашей проблемы:

1. NODE_PATH (<- вероятно, то, что вы ищете): </li>

Вы можете определить переменную среды 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'; может быть хорошим компромиссом

Answer 2

Вы можете установить 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/*"]
    }
  }
}

Надеюсь, это поможет!