Добавление абсолютных путей к приложению, созданному "Create React App"

#reactjs #typescript #create-react-app

Вопрос:

Я создал приложение с помощью Create React App и, если быть более конкретным, я также использую typescript.

Я не могу понять, как установить абсолютные пути для доступа к моим компонентам, страницам и т.д..

В другом сценарии я бы обновил свой tscongig чем-то вроде:

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

но я понятия не имею, как это реализовать, поскольку я использую react-scripts
есть идея?

Ответ №1:

Создайте файл tsconfig.json и добавьте приведенный ниже код.

 {
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

Затем вы можете импортировать свои компоненты как

 import Header from 'components/Header';

Ответ №2:

Вы сможете использовать тот же подход, если создадите в своем решении файл jsconfig.json, который поддерживает те же свойства baseUrl и rootPath, что и tsconfig.

Альтернативой является добавление .env файла в ваше решение со следующей строкой:

 NODE_PATH=src/

Кроме того, помимо файла env, добавьте это в свой jsconfig.json

 {
  "rootDir": "src",
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "*": ["*"]
    }
  }
}

Это должно разрешить как компилятору возможность находить ваши абсолютные импорта, так и linter, обрабатывающему их должным образом.

1. Я установил несколько файлов для компиляции, .env и .env.production, но я ищу что-то, что можно было бы вызывать @components/* и не /src/common/components/*

2. Я обновил комментарий. Это должно позволить вам импортировать такие вещи, как import { Something } from 'components' . Если путь не разрешен из node_modules, он попытается разрешить его из папки src.

Ответ №3:

Смотрите Создание вашего приложения / Импорт компонента / Абсолютный импорт в документации по созданию приложения React.

Вы можете настроить свое приложение так, чтобы оно поддерживало импорт модулей с использованием абсолютных путей. Это можно сделать, настроив jsconfig.json или tsconfig.json файл в корневом каталоге вашего проекта. Если вы используете TypeScript в своем проекте, у вас уже будет tsconfig.json файл.

Ниже приведен пример jsconfig.json файла для проекта JavaScript. Вы можете создать файл, если он еще не существует:
 {
  "compilerOptions": {
    "baseUrl": "src"
   },
  "include": ["src"]
}
  
Если вы используете TypeScript, вы можете настроить baseUrl параметр внутри compilerOptions tsconfig.json файла вашего проекта.

Теперь, когда вы настроили свой проект на поддержку абсолютного импорта, если вы хотите импортировать модуль, расположенный по адресу src/components/Button.js , вы можете импортировать модуль следующим образом:
 import Button from 'components/Button';
  