Absolute import react ( import { foo } from "@/foo )

سلام امیدوارم حالتون خوب باشه

حتما دیدین بعضی ایمپورت تو فایل ریکت با @ شرو میشه مثل

import { folan } from &quot@/folan/folan_file&quot

اگه ندیدین این شکلیه

به این نوع ایمپورت کردن میگن absolute import که باعث میشه کدها خیلی خیلی تمیزتر باشن و خیلی راحتتر بتونیم فایل مورد نظر رو پیدا کنیم و خوانایی کد خیلی بالاتر میره

همین عکس بالا رو بخوایم به صورت عادی import کنیم اینطوری میشه

حالا هرچقد پروژه بزرگتر و فایلا و فولدرا بیشتر و عمیق‌تر باشن پیچیدگیشون هم بیشتره

اگه تو مقاله های دیگه دیده باشین اینکه از Next.Js یا React استفاده میکنین فرق داره و این پست برای React کاربرد داره و برای دیدن آموزش مربوط به Next.js وارد این لینک بشید

اولین مرحله اینه که webpack config رو eject کنیم برای این کار یکی از این دستورا رو ران کنید و وسطش یه تاییدیه ازتون میخواد که y رو بزنید تایید میشه و ادامه میدین

yarn

yarn eject

npm

npm run eject

خب وقتی تموم شد یه فولدر اضافه شده با اسم config بازش کنید توش یه فایل هست با اسم webpack.config.js واردش بشید تو همون فایل سرچ کنید resolve: این resolve یه آبجکت هست تو اون آبجکت یه پراپرتی هست به اسم alias که این alias هم خودش یه آبجکته و کارمون با همین آبجت alias هست

قضیه اینه که تو اون آبجکت alias یه پراپرتی خودمون باید اضافه کنیم و به webpack بگیم که وقتی من مینویسم

@/folan

منظورم چیه

یه همچین حالتی میشه

alias: {
&quot@/folan1&quot: &quot../folan1/&quot
// یکم کد که بصورت دیفالت اینجاس و خب اگه مثل من بلد نیستین بذارین همونطوری بمونه 
}

اینطوری به قضیه نگاه کنین که تو آبجکت alias ما پراپرتی هایی تعریف میکنیم که اون پراپرتی ها key هاشون آدرسی هست که موقه ایمپورت قراره استفاده کنیم value هاشون آدرس واقعیش نسبت به فایل webpack.config,js هست برای مثال :

من یه create react-app زدم به صورت دیفالت همه فایلا داخل پوشه src قرار دارن ما هم میایم داخل همین src یدونه فولدر جدید ایجاد میکنیم اسمشم میذاریم Instructure حالا برای اینکه به webpack بگیم که « آقا وقتی من میگم

@/Instructure ( key of property in alias object )

منظورم اینه

src/Instructure/ ( value of property in alias object )

ولی همونطور که گفتم value باید آدرس اون فولدر نسبت به فایل webpack.config.js باشه پس میایم آدرس دهی میکنیم و به طور واقعی این شکلی میشه

alias: {
&quot@/Instructure&quot: &quot../src/Instructure/&quot
// other codes
}

خب بعد اینکه سیو کردین پروژه رو ران کنید میبینین بدون ایراد ران میشه

و اینکه alias پروژه ای که توش کار میکنم این مدلیه

امیدوارم این پست به کارتون اومده باشه و مرسی که وقت گذاشتین و تا آخرش خوندین

ببخشید اگه طولانی شد و خب با توجه به اینکه اینم اولین نوشته‌ی من بود ممنون میشم هر انتقادی یا نظری داشتین بگین