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

141

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

import Component from '@/components/component'

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

javascript

— लेज़र
स्रोत

नोड मॉड्यूल नामों में @ प्रतीक

— बर्गी

158

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

आप सबसे अधिक संभावना है कि आपके वेबपैक / बैबल कॉन्फिगरेशन में बैबल-प्लगइन-रूट-इंपोर्ट जैसा कुछ है ।

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

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

— बेन
स्रोत

2

धन्यवाद @ felix-kling मेरे उत्तर को बेहतर बनाने के लिए। यह "एक मानक बात नहीं" की तुलना में बहुत बेहतर व्याख्या है :) :)

— बेन

84

यह जान लें कि यह पुराना है, लेकिन मुझे बिल्कुल यकीन नहीं था कि इसे कैसे परिभाषित किया गया है, इसलिए इसे देखा, द्वारा आया, थोड़ा गहरा खोद लिया और आखिरकार यह मेरे Vue-CLI ( Vue.js ) में पाया गया जो वेबपैक कॉन्फ़िगरेशन उत्पन्न करता है

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

तो यह एक उर्फ है जो इस मामले में परियोजना के vue-cli उत्पन्न src निर्देशिका की जड़ को इंगित करता है

— राऊ कर सकते हैं
स्रोत

क्या इस तरह से कुछ का उपयोग करना संभव है? '@*': ['client/src/*']जहाँ केवल बाद @ का हिस्सा लिया जाता है, ताकि मैं कर सकूँ import X from '@components/xऔर यह सही तरीके से उपयोग करने की कोशिश करे client/src/components/x? TS + VSCode पहले से ही tsconfig.json में इस सटीक रूप में अनुमति देता है, हालांकि webpack त्रुटियों के साथ Can't resolve '@components/x' in 'client/src/'। जब मैं इसे आपके समाधान में बदल देता हूं और इसके लिए आयात पथ import X from '@/components/x'तुरंत काम करना शुरू कर देता है, तो रास्ते अन्यथा सही होते हैं।

— क्वर्टी

@ क्वर्टी नहीं पता, पता नहीं @ * बात पता नहीं है कि यह VSCode में मौजूद है, इसलिए मदद नहीं कर

— सकता

29

बनाने के लिए बेन के जवाब और अधिक व्यापक:

सबसे पहले आप जोड़ने की जरूरत है babel-plugin-root-importअपने में devDependenciesमें package.json(यदि का उपयोग करते हुए yarn: yarn add babel-plugin-root-import --dev)। फिर अपनी कुंजी .babelrcमें निम्न पंक्तियाँ जोड़ें plugins:

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

अब, आप उपयोग कर सकते हैं @। उदाहरण के लिए:

के बजाय

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

आप ऐसा कर सकते हैं

import xx from '@/utils/somefile'

— अली मसूदियानपोर
स्रोत

मैंने प्लगइन को अपनी भक्ति पर जोड़ा लेकिन मेरे पास कोई .babelrc नहीं है। मैंने इसे रूट में भी बनाया है, लेकिन फिर भी काम नहीं करता है? मेरे पास सिर्फ babel.config.js

— किक

8

जैसा कि ऊपर कहा गया है, यह सुविधा डिफ़ॉल्ट रूप से जेएस में नहीं है। इसका आनंद लेने के लिए आपको एक बाबेल प्लगइन का उपयोग करना होगा। और इसका काम सरल है। यह आपको अपनी JS फ़ाइलों के लिए एक डिफ़ॉल्ट रूट स्रोत निर्दिष्ट करने की अनुमति देता है और आपको अपनी फ़ाइल आयात को मैप करने में मदद करता है। आरंभ करने के लिए या तो npm के माध्यम से स्थापित करें:

npm install babel-plugin-root-import --save-dev

या

yarn add babel-plugin-root-import --dev

.babelrcअपने एप्लिकेशन की जड़ में एक बनाएं और इन सेटिंग्स को अपने स्वाद के लिए कॉन्फ़िगर करें:

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "the-preferred/root/of-all-your/js/files",
      "rootPathPrefix": "@"
    }]
  ]
}

ऊपर दिए गए कॉन्फ़िगरेशन के साथ, आप बस उस स्रोत से आयात कर सकते हैं जैसे:

import Myfile from "@/Myfile"

यह सब कायरता भरा सामान किए बिना:

"/../../../Myfile"

ध्यान दें कि आप प्रतीक को कुछ भी बदल सकते हैं जैसे "~"कि आपकी नाव तैरती हो।

— wale
स्रोत

0

मैं मूल एप्लिकेशन का निर्माण करने के लिए VS कोड का उपयोग कर रहा हूं।

आपको क्या चाहिए:

अपने अनुप्रयोग के रूट पथ के तहत एक jsconfig.json बनाएँ
अपने jsconfig.json में, निम्न कोड जोड़ें:

{"संकलनकर्ता": {"बेसयूएल": "।", "लक्ष्य": "ईएस 6", "मॉड्यूल": "कॉमनज", "पाथ्स": {"@ @ / ": ["src / "], "@ कॉम्पिटर्स / ": [" src / Components / "]," @ core / ": [" src / core / "]}}," बहिष्कृत ": [" node_modules "]}

मूल रूप से "शॉर्टकट": ["abs_path"]

— डैनियल हुआ
स्रोत