जावास्क्रिप्ट आयात में @ प्रतीक क्या करता है?

Question

उदाहरण के लिए:

import Component from '@/components/component' 

कोड में मैं देख रहा हूँ यह ../ फ़ाइल पथ के लिए निर्देशिका के सापेक्ष में एक स्तर ऊपर जा रहा तरह बर्ताव करता है, लेकिन मैं और अधिक आम तौर पर यह क्या करता है पता करना चाहते हैं। दुर्भाग्य से मुझे प्रतीक खोज समस्या के कारण ऑनलाइन कोई दस्तावेज नहीं मिल रहा है।

Answer 1

अर्थ और मॉड्यूल पहचानकर्ता की संरचना मॉड्यूल लोडर या मॉड्यूल बंडलर पर निर्भर करता है। मॉड्यूल लोडर ईसीएमएस्क्रिप्ट स्पेक का हिस्सा नहीं है। एक जावास्क्रिप्ट भाषा परिप्रेक्ष्य से, मॉड्यूल पहचानकर्ता पूरी तरह से अपारदर्शी है। तो यह वास्तव में निर्भर करता है कि आप किस मॉड्यूल लोडर/बंडलर का उपयोग कर रहे हैं।

आपके वेबपैक/बेबेल कॉन्फ़िगरेशन में आपके पास babel-plugin-root-import जैसी कुछ संभावना है।

मूल रूप से यह परियोजना की जड़ से का मतलब है .. यह तरह बातें लिखने के लिए होने टाल import Component from '../../../../components/component'

संपादित करें: एक कारण यह है कि यह मौजूद है, क्योंकि import Component from 'components/component' कि ऐसा नहीं करता है, लेकिन इसके बजाय खोज node_modules फ़ोल्डर

Answer 2

पता यह पुरानी है, लेकिन मैं वास्तव में यकीन है कि यह कैसे परिभाषित किया है नहीं था, तो यह देखा अप, द्वारा आया था, गहरा खोदा और अंत में यह पाया मेरी Vue-CLI (Vue.js) Webpack config

उत्पन्न

सबसे पहले आप जोड़ने की जरूरत:

resolve: { 
    extensions: ['.js', '.vue', '.json'], 
    alias: { 
    '@': path.join(__dirname, '..', dir) 
    } 
}, 

तो यह एक उपनाम है जो परियोजना

Answer 3

की Vue-CLI उत्पन्न src निर्देशिका की जड़ तक इस मामले अंक में Ben के जवाब और अधिक व्यापक बनाने के लिए है devDependencies में package.json में (यदि yarn का उपयोग कर रहा है: yarn add devDependencies --dev)। अब

"plugins": [ 
[ 
    "babel-plugin-root-import", 
    { 
    "rootPathPrefix": "@" 
    } 
] 
] 

, आप @ उपयोग कर सकते हैं: तो फिर अपने .babelrcplugins कुंजी में निम्न पंक्तियां जोड़ें में । उदाहरण के लिए:

के बजाय

import xx from '../../utils/somefile'

यू कैन

import xx from '@/utils/somefile'