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

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

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

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

Ответы

Ответ 1

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

NODE_PATH=src

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

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

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

Ответ 2

в файле package.json,

извлечь этот код в объект сценариев, как это..

  "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"
  },

это включит импорт абсолютных путей в вашем приложении

Ответ 3

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

Пример конфигурации веб-пакета с помощью разрешения:

Здесь компоненты и 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 Решите ссылку

Ответ 4

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

Потому что вы не сказали нам, почему использование модуля-alis завершилось неудачей? Поэтому я не могу показать, как это исправить.

Не отказывайтесь от своего решения, пока вы не знаете причину!