ওয়েবপ্যাক ব্যবহার করে একটি vue.js প্রকল্পের সাইন ইন পথে ('@') ব্যবহার করে ইএস 6 আমদানি করুন


273

আমি একটি নতুন vue.js প্রকল্প শুরু করছি তাই আমি একটি নতুন ওয়েবপ্যাক প্রকল্পটি (যেমন vue init webpack) ভাসানোর জন্য ভ্যু-ক্লিপ সরঞ্জামটি ব্যবহার করেছি ।

আমি উত্পন্ন ফাইলগুলির মধ্য দিয়ে যাচ্ছিলাম তখন আমি 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
        }
    ]
})

আমি আগে কোনও চিহ্নটিতে ( @) চিহ্নটি দেখিনি । আমি সন্দেহ করি এটি আপেক্ষিক পাথ (সম্ভবত?) এর জন্য অনুমতি দেয় তবে আমি নিশ্চিত হতে চেয়েছিলাম যে এটি সত্যিকার অর্থে কী করে তা আমি বুঝতে পেরেছি।

আমি অনলাইনে সন্ধানের চেষ্টা করেছি কিন্তু কোনও ব্যাখ্যা খুঁজে পাচ্ছিলাম না (সম্ভবত কারণ "সাইন ইন" অনুসন্ধান করা বা আক্ষরিক চরিত্রটি @অনুসন্ধানের মানদণ্ড হিসাবে সহায়তা করে না)।

@এই পথে কী করবেন (ডকুমেন্টেশনের লিঙ্কটি চমত্কার হবে) এবং এটি কোনও এস thing জিনিস? একটি ওয়েবপ্যাক জিনিস? একটি মান-লোডার জিনিস?

হালনাগাদ

এই একই প্রশ্ন সম্পর্কে আমাকে অন্য একটি সদৃশ স্ট্যাকওভারফ্লো প্রশ্ন / উত্তরের প্রতি ইঙ্গিত করার জন্য ফেলিক্স ক্লিংকে ধন্যবাদ জানাই।

যদিও অন্য স্ট্যাকওভারফ্লো পোস্টে মন্তব্য করা এই প্রশ্নের সঠিক উত্তর নয় (এটি আমার ক্ষেত্রে বাবেল প্লাগইন ছিল না) এটি কী ছিল তা সন্ধানের জন্য এটি আমাকে সঠিক দিক নির্দেশ করেছিল।

আপনার জন্য ভ্যু-ক্লিপ ক্র্যাঙ্ক করে দেয় এমন ভাস্কর্যটিতে, বেস ওয়েবপ্যাক কনফিগারেশনের কিছু অংশ .vue ফাইলগুলির জন্য একটি উপকরণ সেট করে:

প্রকল্পের মধ্যে এলিয়াস অবস্থান

এটি উভয় ক্ষেত্রেই উপলব্ধি করে যে এটি আপনাকে এসআরসি ফাইল থেকে একটি আপেক্ষিক পথ দেয় এবং এটি .vueআমদানি পথের শেষে (যা আপনার সাধারণত প্রয়োজন) এর প্রয়োজনীয়তা সরিয়ে দেয় ।

সাহায্যের জন্য ধন্যবাদ!



1
@ ফেলিক্সকলিং এটি সম্পূর্ণ সদৃশ নয় কারণ এটি পুরো প্রশ্নের উত্তর দেয় না, এটি কোনও এসআই 6 জিনিস? একটি ওয়েবপ্যাক জিনিস? একটি মান-লোডার জিনিস?
এস্তাস ফ্লাস্ক

হ্যাঁ, আমি মনে করি প্রশ্নটি একই ছিল তবে সদৃশ নয়। নির্বিশেষে আমি বুঝতে পেরেছিলাম যে এটি কোথা থেকে আসছে এবং একটি উত্তর দিয়ে প্রশ্নটি আপডেট করেছি কারণ আমি উত্তর হিসাবে এটি যুক্ত করতে পারি না।
ক্রিস স্মিটজ

@estus: উত্তরটি এটি পরিষ্কার করে দিয়েছে যে এটি ES6 এর অংশ নয় তবে একটি ওয়েবপ্যাক কনফিগারেশন জিনিস, আপনি কি ভাবেন না? এবং ঠিক এখানে কেসটিই রয়েছে, কেবলমাত্র কনফিগারেশনের প্রকৃতিটি কিছুটা আলাদা।
ফেলিক্স ক্লিং

@ ফেলিক্সক্লিং আমি বিশ্বাস করি যখন এস্তাস উল্লেখ করেছিলেন যে এটি কী ধরণের জিনিস তা এখনও আমি আপডেটটি যোগ করতে পারি নি (এখনও আপডেটটি টাইপ করার সময় আমি তাঁর মন্তব্য আসতে দেখেছিলাম) এটি নিয়ে একটি প্রশ্ন ছিল। আমি প্রস্তুত এবং আমার নির্দিষ্ট উদাহরণ সম্পর্কে একটি বিশদ ব্যাখ্যা আছে তাই আমি যেতে ভাল। ধন্যবাদ বন্ধুরা.
ক্রিস স্মিত্জ

উত্তর:


243

এটি ওয়েবপ্যাক resolve.aliasকনফিগারেশন বিকল্পের সাহায্যে সম্পন্ন হয়েছে এবং ভ্যু-তে নির্দিষ্ট নয়।

ভ্যু ওয়েবপ্যাক টেমপ্লেটে , ওয়েবপ্যাকটি পাথের@/ সাথে প্রতিস্থাপনের জন্য কনফিগার করা হয়েছে :src

  const path = require('path');

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

উপন্যাসটি ব্যবহৃত হয়:

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

171
জাভাস্ক্রিপ্ট এখন আর জাভাস্ক্রিপ্ট নয়। বাবেল / ওয়েবপ্যাকটি আমাদের এই ফ্রাঙ্কেনস্টাইন ভাষা দেয় এবং কোনওভাবে নতুন বিকাশকারীদের বোঝার জন্য বোঝা যায় যে ECMAScript নির্দিষ্টকরণটি কোথায় শেষ হয় এবং ব্যবহারকারীর প্লাগইন / রূপান্তরগুলি শুরু হয়। সত্যিই দুঃখজনক, ইমো।
আপনাকে ধন্যবাদ

3
@ ননমিক সেটআপের ক্ষেত্রে এই জাতীয় কৌশলগুলি প্রবর্তন করা বা না করা ব্যবহারকারীর হাতে রয়েছে। ভ্যুয়ের পক্ষে এটি কোনও বড় বিষয় নয় যেহেতু এটি তার কাস্টম .vue ফাইল ফর্ম্যাটের উপর নির্ভর করে।
এস্তাস ফ্লাস্ক

15
ব্যক্তিগতভাবে আমি মনে করি আপনি চাইলে নমনীয়তা যুক্ত করার ক্ষমতাটি একটি ভাল জিনিস। আমি এটিকে ফ্র্যাঙ্কেনস্টাইন হিসাবে কম এবং ভল্ট্রনের মতো আরও দেখি; আপনি সিংহ হিসাবে স্টাফ করতে পারেন বা একটি বড় রোবট পেতে বিভিন্ন সিংহকে একত্রিত করতে পারেন। হ্যাঁ, কখনও কখনও আপনি এর মতো প্রশ্ন পান তবে উত্তরগুলি খুঁজে পাওয়া যায় না এমন এটি। সত্যিই, আপনি কোনও আকারের যে কোনও প্রকল্পের সাথে ফ্র্যাঙ্কেনস্টাইন বা ভোল্ট্রন ভিউ নিতে পারেন, এটি কেবল "নির্ভরতা ব্যবহার এবং বোঝার"।
ক্রিস স্মিটজ

1
@ ক্রিসস্মিটজি এটি প্রসঙ্গ এবং দৃষ্টিকোণের উপর নির্ভর করে। এই জাতীয় কিছু করা প্রকল্পটিকে ওয়েবপ্যাক ব্যবহারে সীমাবদ্ধ করবে। প্রকল্পটি দেশীয় ES6 মডিউলগুলি কখন আসবে সেগুলি ব্যবহার করতে চাইলে, বা এটি নোড যেখানে কমনজেএস মডিউলগুলির জন্য ব্যবহার করা যেতে পারে a অন্যদিকে লম্বা আপেক্ষিক পাথগুলি বজায় রাখা এবং রিফ্যাক্টর করা শক্ত হতে পারে।
এস্তাস ফ্লাস্ক

3
ব্যবহার করার সময় vue-cliv3 এর + আপনি ব্যবহার করা উচিত ~@রেফারেন্স থেকে srcফোল্ডার। উদা:$font-path: '~@/assets/fonts/';
কনস্টা গর্গান

9

এছাড়াও মনে রাখবেন আপনি tsconfig এ ভেরিয়েবলও তৈরি করতে পারেন:

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

নামকরণের উদ্দেশ্যে এটি ব্যবহার করা যেতে পারে:

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

তবে এই ধরণের উপন্যাস উত্স জেএসে খালি ছেড়ে দেওয়া হবে এবং তারপরে রান-টাইমে আপনার উপনামটির কাজ করার জন্য একটি মোড়কের মধ্যস্থতা থাকা দরকার। নির্মাণের সময় রূপান্তরিত হতে পারে এই টিএস সিনট্যাক্সের জন্য বাবেলের মাধ্যমে কোনও উপায় আছে? সঙ্গে টাইপ করা বিষয় এর tscআপনি ভালো কিছু করতে হবে না এবং এর ফলে হয় module-aliasবা tsconfig-paths
কেন

3

আমি নিম্নলিখিত সংমিশ্রণ সঙ্গে শেষ

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

আইডিই ইউরির সতর্কতা বন্ধ করবে, তবে এটি "বিল্ড \ ওয়েবপ্যাক.বেস.কোনফ.জেজেস" সংকলনের সময় অবৈধ ইউরির কারণ হয়ে দাঁড়ায়

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

Bingoo!


1

সমাধান ('src') আমার পক্ষে কাজ করে না তবে path.resolve ('src') কাজ করে

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

1

হয়ত ওয়েবপ্যাকে যুক্ত করার চেষ্টা করুন। মিশ্রওয়েবেপ্যাক কনফিগ রেফারেন্স লারাভেল মিক্স

mix.webpackConfig({

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

এবং তারপর প্রচুর ব্যবহারে।

<img src="@imgSrc/logo.png" />
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.