ES6 आयात ('@') वेबपैक का उपयोग करके vue.js प्रोजेक्ट में पथ में साइन इन करता है

Question

मैं एक नया vue.js प्रोजेक्ट शुरू कर रहा हूं, इसलिए मैंने एक नया वेबपैक प्रोजेक्ट (यानी vue init webpack) मचान बनाने के लिए vue-cli टूल का उपयोग किया है ।

जैसा कि मैं उत्पन्न फ़ाइलों के माध्यम से चल रहा था मैंने src/router/index.jsफ़ाइल में निम्न आयातों पर ध्यान दिया :

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // <- this one is what my qusestion is about

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }
    ]
})

मैंने पहले @एक पथ पर साइन ( ) नहीं देखा है । मुझे संदेह है कि यह सापेक्ष रास्तों के लिए अनुमति देता है (शायद?) लेकिन मैं यह सुनिश्चित करना चाहता था कि मैं समझता हूं कि यह वास्तव में क्या करता है।

मैंने ऑनलाइन खोज करने की कोशिश की, लेकिन एक स्पष्टीकरण खोजने में सक्षम नहीं था (क्योंकि "साइन पर" खोज या शाब्दिक चरित्र का उपयोग @खोज के रूप में मदद नहीं करता है)।

@इस पथ में क्या करता है (प्रलेखन के लिए लिंक शानदार होगा) और क्या यह एक es6 है? एक वेबपैक चीज़? एक वाउ-लोडर चीज?

अपडेट करें

धन्यवाद फेलिक्स क्लिंग ने मुझे एक और डुप्लिकेट स्टैकओवरफ़्लो प्रश्न / इसी प्रश्न के बारे में उत्तर देने के लिए इशारा किया।

हालांकि अन्य स्टैकओवरफ्लो पोस्ट पर टिप्पणी इस सवाल का सटीक उत्तर नहीं है (यह मेरे मामले में एक बाबेल प्लगइन नहीं था) यह मुझे सही दिशा में इंगित करता है कि वह क्या था।

मचान में है कि आप के लिए vue-cli cranks, बेस webpack config का एक हिस्सा .vue फ़ाइलों के लिए एक उपनाम सेट करता है:।

यह दोनों इस तथ्य में समझ में आता है कि यह आपको src फ़ाइल से एक सापेक्ष पथ देता है और यह .vueआयात पथ के अंत में आवश्यकता को हटा देता है (जिसकी आपको सामान्य रूप से आवश्यकता होती है)।

सहायता के लिए धन्यवाद!

Comments

मेरी टिप्पणी देखें ।

— फेलिक्स क्लिंग

@FelixKling यह एक सटीक डुप्लिकेट नहीं है क्योंकि यह पूरे सवाल का जवाब नहीं देता है, क्या यह एक es6 बात है? एक वेबपैक चीज़? एक वाउ-लोडर चीज?

— एस्टुस फ्लास्क

हाँ, मुझे लगता है कि प्रश्न समान था लेकिन डुप्लिकेट नहीं था। भले ही मुझे समझ में आया कि यह कहां से आ रहा था और मैंने एक स्पष्टीकरण के साथ सवाल को अपडेट किया क्योंकि मैं इसे उत्तर के रूप में नहीं जोड़ सकता।

— क्रिस शमित्ज़

@estus: उत्तर से यह स्पष्ट हो जाता है कि यह ES6 का हिस्सा नहीं है, लेकिन एक वेबपैक कॉन्फ़िगरेशन चीज़ है, क्या आपको नहीं लगता? और वह वास्तव में मामला यहाँ भी है, केवल कि विन्यास की प्रकृति पर कुछ भिन्न है।

— फेलिक्स क्लिंग

@FelixKling मेरा मानना ​​है कि जब एस्टस ने बताया कि अभी भी एक सवाल था कि यह किस तरह की चीज है तो मैंने अभी तक अपडेट नहीं जोड़ा है (मैंने देखा कि उनकी टिप्पणी आई थी जैसे मैं अपडेट टाइप कर रहा था)। मैं पूरी तरह तैयार हूं और मेरे विशेष उदाहरण के बारे में विस्तृत विवरण है इसलिए मैं जाने के लिए अच्छा हूं। धन्यवाद दोस्तों।

— क्रिस शमित्ज़

Answer 1

यह Webpack resolve.aliasकॉन्फ़िगरेशन विकल्प के साथ किया जाता है और Vue के लिए विशिष्ट नहीं है।

Vue Webpack टेम्पलेट में , Webpack को पथ से बदलने के लिए कॉन्फ़िगर किया @/गया srcहै :

  const path = require('path');

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

उपनाम के रूप में प्रयोग किया जाता है:

import '@/<path inside src folder>';

Comments

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

— धन्यवाद

@naomik यह सेटअप में है या नहीं इस तरह के करतब पेश करने उपयोगकर्ता पर निर्भर है। यह Vue के लिए एक बड़ी बात नहीं है क्योंकि यह अपने कस्टम .vue फ़ाइल प्रारूप पर वैसे भी निर्भर करता है।

— एस्टुस फ्लास्क

व्यक्तिगत रूप से मुझे लगता है कि अगर आप चाहते हैं कि लचीलापन जोड़ना अच्छी बात है। मैं इसे और अधिक Voltron की तरह फ्रेंकस्टीन के रूप में और कम देखते हैं; आप एक शेर के रूप में सामान कर सकते हैं या एक बड़े रोबोट के लिए विभिन्न शेरों को एक साथ जोड़ सकते हैं। हाँ, कभी-कभी आपको इस तरह के प्रश्न मिलते हैं, लेकिन यह ऐसा नहीं है जैसे उत्तर नहीं मिले। वास्तव में, आप किसी भी आकार की किसी भी परियोजना के साथ फ्रेंकस्टीन या वोल्ट्रॉन दृश्य ले सकते हैं, यह सिर्फ "निर्भरता का उपयोग करना और समझना" है।

— क्रिस शमित्ज़

@ChrisSchmitz यह संदर्भ और परिप्रेक्ष्य पर निर्भर करता है। ऐसा कुछ करने से वेबपैक का उपयोग करने की परियोजना प्रतिबंधित हो जाएगी। हो सकता है कि यह अच्छी बात न हो, अगर परियोजना में मूल ईएस 6 मॉड्यूल का उपयोग करने का इरादा है, जब वे पहुंचेंगे, या यह नोड है जहां कॉमनजेस का उपयोग मॉड्यूल के लिए किया जा सकता है। दूसरी ओर लंबे रिश्तेदार पथ बनाए रखने और रिफ्लेक्टर करने के लिए कठिन हो सकते हैं।

— एस्टुस फ्लास्क

vue-cliV3 + का उपयोग करते समय आपको ~@संदर्भ srcफ़ोल्डर का उपयोग करना चाहिए । जैसे:$font-path: '~@/assets/fonts/';

— कांस्टे गोरगन

Answer 2

यह भी ध्यान रखें कि आप tsconfig में भी चर बना सकते हैं:

"paths": {
  "@components": ["src/components"],
  "@scss": ["src/styles/scss"],
  "@img": ["src/assests/images"],
  "@": ["src"],
}

इसका उपयोग सम्मेलन के उद्देश्यों के नामकरण के लिए किया जा सकता है:

import { componentHeader } from '@components/header';

Comments

लेकिन इस तरह के उर्फ ​​को स्रोत जेएस में नंगे छोड़ दिया जाएगा और फिर रन-टाइम पर आपको उर्फ ​​के काम करने के लिए एक रैपर इंटरसेप्ट की आवश्यकता होगी। हो सकता है कि इस टीएस सिंटैक्स के लिए बाबेल के माध्यम से एक तरीका है निर्माण समय पर परिवर्तित होने के लिए? साथ टाइपप्रति के tscआप की तरह कुछ की आवश्यकता होगी नहीं है और इसलिए करता है module-aliasया tsconfig-paths।

— केन

Answer 3

मैं निम्नलिखित संयोजन के साथ खत्म हो गया

import HelloWorld from '@/components/HelloWorld'
=>
import HelloWorld from 'src/components/HelloWorld'

IDE, uri को चेतावनी देना बंद कर देगा, लेकिन यह "निर्माण \ webpack.base.conf.js" में संकलन करने पर अमान्य uri का कारण बनता है।

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'src': resolve('src'),
  }
},

Bingoo!

Answer 4

संकल्प ('src') मेरे लिए कोई काम नहीं करता है, लेकिन path.resolve ('src') काम करता है

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

Answer 5

शायद वेबपैक में जोड़ने का प्रयास करें। मिक्स .webpackConfig लार्वा मिक्स संदर्भ ।

mix.webpackConfig({

    resolve: {
        alias: {
            '@imgSrc': path.resolve('resources/assets/img')
        }
    }
});

और फिर वाउ उपयोग में।

<img src="@imgSrc/logo.png" />