Абсолютные пути импорта ES6 в проекте без конфигурации?

Question

Я хочу использовать абсолютный импорт, например

import Button from 'components/iu/Button';

вместо

import Button from '../../../iu/Button';

Приложение было создано с использованием create-реагировать-приложение.В настоящее время приложение не имеет webpack.config.js или .babelrc.Я не уверен, в какой степени я могу создать эти файлы и добавить конфигурацию, и в какой степени трубопровод create-реакция-приложение обрабатывает все это вне поля зрения.

Как добавить абсолютный импорт в проект?

Answer 1

@ JaLe прав, и, как он сказал, похоже, это работает только с create-реагировать-приложение.

Кроме того, вы также должны добавить следующий файл в ваш проект, чтобы ваша IDE могла датьвы исправляете автодополнения пути модуля:

jsconfig.json

// Set up compilerOptions for VSCode, including how to resolve import statements (needed in accordance with the setup done in ".env")
{
  "compilerOptions": {
    "module": "es6",
    "baseUrl": "./"
  }
}

Answer 2

Создайте файл с именем .env в корневом каталоге (где находится папка src).

Поместите эту строку в файл .env.

NODE_PATH = src

Теперь вы можете использовать абсолютный импорт, например import Button from 'components/iu/Button';.

Протестировано на Reaction-Create-App 1.x .