Как избежать использования импорта относительного пути (/../../../ redux / action / action1) в create-react-app

Я использую пакет create-react-app для создания веб-сайта react. Я использовал относительные пути по всему моему приложению для импорта компонентов,ресурсов, redux и т. д. например, import action from '../../../redux/action

Я пробовал использовать модуль-ались пакет npm, но без успеха. Есть ли плагин, который я могу использовать для импорта на основе имени папки или псевдоним?

например., import action from '@redux/action' или import action from '@resource/css/style.css'

18
create-react-app npm react-native reactjs

4 ответов

создайте файл с именем .env в корне проекта и напишите там:

NODE_PATH=src

затем перезапустите сервер разработки. Вы должны иметь возможность импортировать что-нибудь внутри src без относительных путей.

примечание Я бы не рекомендовал называть вашу папку src/redux потому что теперь это сбивает с толку, то ли redux импорт относится к вашему приложению или библиотеке. Вместо этого вы можете вызвать свою папку src/app и импортировать вещи из app/....

мы намеренно не поддержка пользовательского синтаксиса, как @redux потому что он не совместим с алгоритмом разрешения узла.

51

мы можем использовать свойство разрешения webpack 2 в конфигурации webpack.

пример конфигурации webpack с помощью resolve:

здесь компонент и utils являются независимыми папками, содержащими компоненты React.

resolve: {
        modules: ['src/scripts', 'node_modules'],
        extensions: ['.jsx', '.js'],
        unsafeCache: true,
        alias: {
            components: path.resolve(__dirname, 'src', 'scripts', 'components'),
            utils: path.resolve(__dirname, 'src', 'scripts', 'utils'),
        }
    }

после этого мы можем импортировать непосредственно в файлы: 

import UiUtils from 'utils/UiUtils';
import TabContent from 'components/TabContent';

Webpack 2 Разрешить Ссылку

1

Я использую babel-plugin-module-resolver для моего проекта, чтобы решить эту проблему. babel-плагин-модуль-решатель также как и модуль-ались. Поэтому я думаю, что вы должны просто решить, используя модуль-ались

1

в пакет.файл json,

извлеките этот код в объекте scripts следующим образом..

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
     "eject": "NODE_PATH=src/ react-scripts eject"
  },

Это позволит абсолютный путь импорта в вашем приложении

1