Абсолютный импорт: реакция и машинопись - PullRequest
Новая
       8

Абсолютный импорт: реакция и машинопись

0 голосов
/ 15 апреля 2020

Фон

Я загрузил приложение React, используя create-react-app и машинопись. По мере роста приложения ( цель ) я хотел бы реализовать абсолютный импорт. Я использую VS Code (Visual Studio Code) и с очень небольшой конфигурацией, я получил TS и VS Code для распознавания моего абсолютного импорта.

Для TS я предпринял следующие шаги в моем tsconfig.json:

  • Измените «baseUrl» на «client»: "baseUrl": "client"
  • Добавлен «client» для моей клавиши include: "include": ["./**/*.ts", "./**/*.tsx", "client"]

Для VS Code, я изменил свои настройки пользователя: Typescript -> Preferences: Import Module Specifier -> non-относительный

Это прекрасно работало. Весь мой импорт использовал абсолютный импорт, без ошибок. Но когда я запустил приложение, я получил ошибку: Error: Cannot find module "component" Я ожидал увидеть свое приложение, как до абсолютного импорта.

То, что я пытался

Подумал, ошибка в веб-пакете или в сообщении.

  1. Создано env Файл

    Добавлено следующее в файл env в root приложения (в том же месте, что и мой пакет . json) 

NODE_PATH=client/

Это не сработало. Та же ошибка: Error: Cannot find module "components". Также попытался изменить NODE_PATH на REACT_APP_NODE_PATH, который тоже не работал.

Изменить Babel Config

Добавлен распознаватель модуля плагина babel с yarn add -D babel-plugin-module-resolver. Затем изменил мой babel.config.js на: 

module.exports = { 
  env {...}, 
  plugins: [
    [
      'module-resolver',
      {
        cwd: 'babelrc',
        extensions: ['.ts', '.tsx', '.js'],
        alias: {
          client: './client',
        },
      },
    ],
  ]
}

, который возвращает ту же ошибку. (Я перезагружаю сервер после каждого изменения в моих файлах конфигурации)

Ссылки на ресурсы Я использовал много разных статей, чтобы попытаться найти ясность. Вот некоторые из них:

  • Абсолютный импорт с приложением Create React от Кайла Труонга ( here )
  • Абсолютный импорт в приложении Create React от Майкла Беднарца ( здесь )
  • Настройка абсолютного импорта React для TypeScript Джастином Ноэлем ( here )
  • Использование абсолютного пути в компонентах React ( StackOverflow )
  • Как импортировать js модулей (с абсолютным путем) в мой машинописный файл в приложении React?

и многие другие. Ничего из этого не сработало.

Структура проекта

Моя структура проекта немного "нетрадиционная" или нет моего типичного шаблона, который может вызвать проблему. 

└── root dir
    ├── assets
    │   └── client
    │       ├── assets
    │       ├── components
    │       ├── hooks
    │       └── ...
    │   └── babel.config.js
    │   └── .babelrc
    │   └── webpack.config.js
    │   └── package.json
    └── server files (no server dir)

Так что client похоже на мой src в типичном приложении реакции. assets - это «входной каталог» для моего сервера, который находится в root dir.

Буду признателен за любую помощь.

...