रिलेशनशिप पथ आयात (/../../../redux/action/action1) का उपयोग करने से बचने के लिए कैसे करें-प्रतिक्रिया-एप

Question

मैं प्रतिक्रिया वेबसाइट बनाने के लिए create-react-app पैकेज का उपयोग कर रहा हूं। मैं आयात करने घटकों, संसाधन, redux आदि जैसे के लिए मेरे पूरे एप्लिकेशन संबंधित पथ उपयोग कर रहा था, import action from '../../../redux/action

मैं module-alis NPM पैकेज का उपयोग की कोशिश की है, लेकिन कोई सफलता के साथ। क्या कोई प्लगइन है जिसे मैं फ़ोल्डर नाम या उपनाम के आधार पर आयात करने के लिए उपयोग कर सकता हूं?

उदा।, import action from '@redux/action' या import action from '@resource/css/style.css'

Answer 1

परियोजना जड़ में एक फ़ाइल बुलाया .env बनाएँ और वहाँ लिखें:

NODE_PATH=src 

फिर विकास सर्वर को पुनरारंभ करें। आप सापेक्ष पथ के बिना src के अंदर कुछ भी आयात करने में सक्षम होना चाहिए।

नोट मैं आपके फ़ोल्डर src/redux पर कॉल करने की अनुशंसा नहीं करता क्योंकि अब यह भ्रमित है कि redux आयात आपके ऐप या लाइब्रेरी को संदर्भित करता है या नहीं। इसके बजाय आप अपने फ़ोल्डर src/app पर कॉल कर सकते हैं और app/... से चीजें आयात कर सकते हैं।

हम जानबूझकर @redux जैसे कस्टम वाक्यविन्यास का समर्थन नहीं करते हैं क्योंकि यह नोड रिज़ॉल्यूशन एल्गोरिदम के साथ संगत नहीं है।

Answer 2

हम webpack config में webpack 2 संकल्प संपत्ति का उपयोग कर सकते हैं।

नमूना webpack config संकल्प का उपयोग कर:

यहाँ घटक और utils स्वतंत्र घटकों प्रतिक्रिया वाले फ़ोल्डर हैं।

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 Resolve Reference

Answer 3

मुझे लगता है कि समस्या को हल करने के लिए अपनी परियोजना के लिए babel-plugin-module-resolver उपयोग कर रहा हूँ। बेबेल-प्लगइन-मॉड्यूल-रिज़ॉल्वर भी मॉड्यूल-एलिस जैसा ही है। तो मुझे लगता है कि आपको मॉड्यूल-एलिस समस्या का उपयोग करके हल करना चाहिए।

क्योंकि आपने हमें नहीं बताया कि मॉड्यूल-एलिस का उपयोग क्यों विफल रहा? तो मैं आपको यह दिखाने के लिए नहीं दिखा सकता कि इसे कैसे ठीक किया जाए।

जब आप कारण नहीं जानते हैं तो अपना समाधान न छोड़ें!