জাভাস্ক্রিপ্ট আমদানিতে @ প্রতীকটি কী করবে?

Question

উদাহরণ স্বরূপ:

import Component from '@/components/component'

কোডটিতে আমি এটির সন্ধান করছি ../ফাইল পাথের সাথে সম্পর্কিত ডিরেক্টরিতে এক স্তরের উপরে উঠার মতো আচরণ করে , তবে আমি সাধারণত এটি কী করে তা জানতে চাই। দুর্ভাগ্যক্রমে আমি প্রতীক অনুসন্ধানের সমস্যার কারণে অনলাইনে কোনও ডকুমেন্টেশন পাচ্ছি না।

Comments

নোড মডিউল নামগুলিতে @ প্রতীক ব্যবহারের

— বার্গি

Answer 1

মডিউল শনাক্তকারীর অর্থ এবং কাঠামো মডিউল লোডার বা মডিউল বান্ডেলারের উপর নির্ভর করে । মডিউল লোডার ECMAScript বিশেষের অংশ নয়। একটি জাভাস্ক্রিপ্ট ভাষার দৃষ্টিকোণ থেকে, মডিউল সনাক্তকারী সম্পূর্ণ অস্বচ্ছ। সুতরাং এটি নির্ভর করে আপনি কোন মডিউল লোডার / বান্ডলারটি ব্যবহার করছেন।

আপনার সম্ভবত সম্ভবত আপনার ওয়েবপ্যাক / ব্যাবেল কনফিগারেশনে ব্যাবেল -প্লাগইন-রুট-আমদানির মতো কিছু রয়েছে ।

মূলত এটি প্রকল্পের মূল থেকেই বোঝায় .. এটি এ জাতীয় জিনিস লিখতে এড়ানো হয়import Component from '../../../../components/component'

সম্পাদনা: এটি বিদ্যমান থাকার একটি কারণ হ'ল এটি import Component from 'components/component'না করে পরিবর্তে node_modulesফোল্ডারে অনুসন্ধান করুন

Comments

আমার উত্তরটি উন্নত করার জন্য @ ফেলিক্স-ক্লিংকে ধন্যবাদ। এটা তোলে "একটি মান জিনিস" চেয়ে :) অনেক ভালো ব্যাখ্যা

— বেন

Answer 2

এটি পুরানো জানুন, তবে এটি কীভাবে সংজ্ঞায়িত করা হয়েছে তা আমি ঠিক নিশ্চিত ছিলাম না, তাই এটি সন্ধান করলাম, এসে এলো, আরও গভীর গভীর খনন করলাম এবং অবশেষে এটি আমার ভিউ- সিএমআই ( ভ্যু.জেএস ) উত্পাদিত ওয়েবপ্যাক কনফিগারেশনে পেয়েছি

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

সুতরাং এটি একটি উপনাম যা এই ক্ষেত্রে প্রকল্পের ভ্যু-ক্লিমে উত্পন্ন এসআরসি ডিরেক্টরিতে মূল নির্দেশ করে

Comments

এরকম কিছু ব্যবহার করা কি সম্ভব? '@*': ['client/src/*']যেখানে অংশ মাত্র পর @ নেওয়া হয়, তাই আমি যে কাজ করতে পারেন import X from '@components/xএবং এটি সঠিকভাবে এক্সেস করার চেষ্টা করে client/src/components/x? টিএস + ভিএসকোড ইতিমধ্যে tsconfig.json এ এই সঠিক ফর্মটিতে অনুমতি দেয় তবে এর সাথে ওয়েবপ্যাক ত্রুটি Can't resolve '@components/x' in 'client/src/'। যখন আমি এটিকে আপনার দ্রব্যে পরিবর্তন করি এবং এর সাথে আমদানি করা পাথগুলি import X from '@/components/x'তত্ক্ষণাত্ কাজ শুরু করে, তাই পাথগুলি অন্যথায় সঠিক।

— কিওয়ারটি

@ কিওয়ার্টি কোনও ধারণা নেই, @ * জিনিসটি জানেন না এটি ভিএসকোডে রয়েছে বলে জানতেন না, তাই সাহায্য করতে পারবেন না

— রাউ

Answer 3

করতে বেন এর উত্তর আরো ব্যাপক:

প্রথমে যোগ করতে হবে 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'

Comments

আমি আমার নির্ভরতাতে প্লাগইন যুক্ত করেছি তবে আমার কোনও .belrc নেই। আমি এমনকি এটি মূলে তৈরি, কিন্তু এখনও কাজ করে না? আমার সবেমাত্র babel.config.js আছে

— কিক

Answer 4

উপরে যেমন বলা হয়েছে, এই বৈশিষ্ট্যটি ডিফল্টভাবে জেএসে নেই। এটি উপভোগ করতে আপনাকে একটি ব্যাবেল প্লাগইন ব্যবহার করতে হবে। এবং এটির কাজটি সহজ। এটি আপনাকে আপনার জেএস ফাইলগুলির জন্য একটি ডিফল্ট রুট উত্স নির্দিষ্ট করার অনুমতি দেয় এবং আপনাকে এতে নিজের ফাইল আমদানি ম্যাপ করতে সহায়তা করে। যে কোনও এনপিএমের মাধ্যমে ইনস্টল শুরু করতে:

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"

মনে রাখবেন যে আপনি প্রতীকটি এমন কোনও কিছুর কাছেও পরিবর্তন করতে পারেন "~"যদি এটি আপনার নৌকাকে ভাসিয়ে দেয়।

Answer 5

নেটিভ অ্যাপ্লিকেশনগুলি তৈরি করতে আমি ভিএস কোড ব্যবহার করছি।

আপনার যা প্রয়োজন তা হ'ল:

1. আপনার অ্যাপ্লিকেশন এর মূল পাথ অধীনে একটি jsconfig.json তৈরি করুন

2. আপনার jsconfig.json এ, নিম্নলিখিত কোডটি যুক্ত করুন:

   comp "সংকলক অপশনস": base "বেসউআরএল": "।", "লক্ষ্য": "ইএস 6", "মডিউল": "সাধারণ", "পাথ": {"@ / ": ["এসআরসি / "], "@ কম্পোনেন্টস / ": [" এসআরসি / উপাদান / "]," @ কোর / ": [" এসসিআর / কোর / "]}}," বাদ দিন ": [" নোড_মডিউল "]}

মূলত "শর্টকাট" এর মতো: ["অ্যাবস_পথ"]