Jak uniknąć importowania ścieżek względnych (/../../../redux/action/action1) w aplikacji create-react-app

Korzystam z pakietu create-react-app do tworzenia strony reagowania. Używałem ścieżek względnych w całej mojej aplikacji do importowania komponentów, zasobów, redux itp. Np., import action from '../../../redux/actionJak uniknąć importowania ścieżek względnych (/../../../redux/action/action1) w aplikacji create-react-app

Próbowałem używać pakietu NPM module-alis, ale bez powodzenia. Czy istnieje jakaś wtyczka, której mogę użyć do zaimportowania na podstawie nazwy folderu lub aliasu?

Np., import action from '@redux/action' lub import action from '@resource/css/style.css'

Źródło

2017-07-20 Prem

Utwórz plik o nazwie .env w katalogu projektu i napisać tam:

NODE_PATH=src

Następnie uruchom serwer deweloperski. Powinieneś być w stanie zaimportować wszystko wewnątrz src bez ścieżek względnych.

Uwaga Nie polecam wywoływania Twojego folderu src/redux, ponieważ obecnie mylące jest, czy import dotyczy aplikacji lub biblioteki. Zamiast tego możesz zadzwonić do swojego folderu src/app i zaimportować rzeczy z app/....

Celowo nie obsługujemy niestandardowej składni, takiej jak @redux, ponieważ nie jest ona zgodna z algorytmem rozdzielczości węzła.

Źródło

2017-07-20 12:02:36

Czy mogę to zrobić w reakcji-create-app? Próbowałem, ale wygląda na to, że nie działa, chociaż facet stąd https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d sugeruje to samo – yerassyl

tak działa dla mnie z tworzeniem react-app – Mehari

@Mehari jaka jest twoja wersja kreacji-reakcji-aplikacji i skryptów-reakcji? – qwang

Możemy użyć WebPACK 2 właściwość resolve w config WebPACK.

Próbka WebPack config używając resolve:

Tutaj komponent i utils są niezależne folder zawierający React komponentów.

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'), 
     } 
    }

Po tym możemy importować bezpośrednio w plikach:

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

Webpack 2 Resolve Reference

Źródło

2017-07-20 11:29:57 santosh

Używam pakietu create-react-app, w którym nie mogę zmodyfikować konfiguracji webpacka. Czy jest jakikolwiek inny sposób robienia tego? – Prem

webpack.config.js jest dostępny w poniższej ścieżce: '/ create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js' '/create-react- app/blob/master/packages/react-scripts/config/webpack.config.prod.js' – santosh

Nie, modyfikowanie tych konfiguracji nie jest obsługiwane. Możesz wyrzucić, ale stracisz wiele korzyści z CRA. Proszę zobaczyć moją odpowiedź na obsługiwany sposób robienia tego. –

Używam babel-plugin-module-resolver dla mojego projektu, aby rozwiązać ten problem. Babel-plugin-moduł-resolver jest również taki sam jak module-alis. Więc myślę, że powinieneś właśnie rozwiązać problem z module-alis.

Ponieważ nie powiedziałeś nam, dlaczego nie udało się użyć modułu ? Więc nie mogę pokazać, jak to naprawić.

Nie poddawaj się, póki nie znasz przyczyny!

Źródło

2017-07-20 11:47:41

Nie będzie działać z funkcją Utwórz aplikację. Nie obsługuje niestandardowych wtyczek Babel. –

Jak uniknąć importowania ścieżek względnych (/../../../redux/action/action1) w aplikacji create-react-app

Odpowiedz

Powiązane problemy