Вы устали добавлять один и тот же оператор импорта для React в каждый файл TypeScript вашего проекта? Это может быть довольно хлопотно, но не волнуйтесь! В этой статье мы рассмотрим несколько способов устранения этой повторяющейся ошибки и оптимизации рабочего процесса разработки React. Давайте погрузимся!

Метод 1: используйте пакет «react-app-rewired»

Один из способов избежать импорта React в каждый файл TypeScript — использовать пакет «react-app-rewired». Этот пакет позволяет вам изменять конфигурацию Webpack приложения Create React (CRA), не выходя из настроек по умолчанию.

Вот как это можно сделать:

1. Установить пакет «react-app-rewired» в качестве зависимости разработки:

   npm install react-app-rewired --save-dev

2. Создайте файл «config-overrides.js» в корне вашего проекта и добавьте следующий код:

   module.exports = function override(config, env) {
   config.externals = {
   'react': 'React',
   'react-dom': 'ReactDOM'
   };
   return config;
   };

3. В файле package.json замените раздел «scripts» следующим:

   "scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"
   }

4. Перезапустите сервер разработки. Теперь вы сможете использовать компоненты React без явного импорта React в каждый файл.

Метод 2: использовать параметр компилятора TypeScript «paths»

TypeScript предоставляет опцию компилятора «пути», которая позволяет вам определять собственные псевдонимы для импорта модулей. Используя эту функцию, вы можете создать псевдоним для React и избежать его импорта в каждый файл.

Выполните следующие действия:

1. Откройте файл «tsconfig.json».

2. Обновите раздел «CompilerOptions», добавив следующий код:

   "compilerOptions": {
   "baseUrl": ".",
   "paths": {
   "react": ["node_modules/react"],
   "react-dom": ["node_modules/react-dom"]
   }
   }

3. Сохраните файл и перезапустите сервер разработки. Теперь вы можете импортировать компоненты React без явного импорта самого React.

Метод 3. Использование пользовательской конфигурации веб-пакета

Если вы не используете приложение Create React или у вас есть собственная конфигурация Webpack, вы можете изменить ее, чтобы автоматически разрешать импорт React. Вот как:

1. Найдите файл конфигурации Webpack (например, «webpack.config.js» или «webpack.config.ts»).

2. Добавьте следующий код в объект конфигурации:

   resolve: {
   alias: {
   'react': require.resolve('react'),
   'react-dom': require.resolve('react-dom')
   }
   }

3. Сохраните файл и перезапустите сервер разработки. React теперь должен разрешаться автоматически, устраняя необходимость явного импорта в каждый файл.

Заключение

Реализуя любой из этих методов, вы можете попрощаться с утомительной задачей импорта React в каждый файл TypeScript. Независимо от того, решите ли вы использовать «react-app-rewired», опцию компилятора «paths» TypeScript или пользовательскую конфигурацию Webpack, вы значительно улучшите свой опыт разработки и организацию кода.

Так что давайте, попробуйте эти методы и наслаждайтесь более оптимизированным рабочим процессом разработки React!