სრული გზიზს იმპორტები

არ დაგავიწყდეთ drawback-ების სექციის წაკითხვა 🙌

---

I. Absolute imports

დეველოპერისთვის კოდის რეფაქტორინგი სულ დღის წესრიგში არის, თვითონ კოდის შეცვლასთან ერთად ვცვლით ფაილების ადგილს ჩვენი პროექტის საქაღალდეში, თუ ჩვენ ვიყენებთ თანამედროვე IDE-ს როგორციაა vscode, jetbrain's IDE, ისინი დაგვეხმარებიან ჩვენი იმპორტების შეცვლაში, მაგრამ საუკეთესო IDE-ებიც კი არ შეცვლიან ფაილში დაიმპორტებულ ფაილს გზას, ისინი მარტო იმ იმპორტს შეცვლიან სადაც ჩვენი ეს გამოძრავებული ფაილი იყო ნახსენები, ეს კი კარგია მაგრამ ჩვენ მერე მაინც გვიწევს ფაილში შესვლა და იმპორტების ცვილება, ამის მოსაგვარებლად ერთი კარგი გზა ის არის რომ ყველა ჩვენი იმპორტის გზის დაწყების წერტილი ერთი და იგივე იყოს რის შედეგადაც ფაილს გამოძრავება შიგნით დაიმპორტებულ ფაილებს არ არევს, მაგრამ ეს როგორ შევძლოთ 🤔, საბედნიეროთ ეს საკმაოდ მარტივია, ჩვენი პროექტის რუტში უნდა შევქმნათ jsconfig.json სადაც ამას ჩავწერთ:

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

თუ ჩვენი პროექტი TS-ში არის იგივე რამ უნდა ჩავამატოთ ჩვენ tsconfig.json-ში იღონდ იქ რაც წერია არ ამოშალოთ 👀.

თუ თქვენ წერთ vite-ის პროექტში მაშინ თქვენ vite.config.js-ში უნდა ჩაამატოთ შემდეგი ხაზი:

import path from 'path'
// ...
resolve: {
  alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
},

ამ პატარა კონფიგურაციის შემდეგ მოდი ვცადოთ ჩვენ გვერდის კომპონენტში რომელიც src/pages/Login/Login.jsx-შია დავაიმპორტოთ რაიმე გლობალური კომპონენტი.

import FormOutline from '@/components/FormOutline'

ასეთი იმპორტის გამო ჩვენ სადაც არ უნდა წავიღოთ ჩვენი Login.jsx-ი ეს იმპორტი იმუშავებს რათქუმაუნდა src-იდან თუ არ გავიტანთ 👀, შეგიძლიათ ცადოთ და ეს ფაილი src/pages/Login/component/Login.jsx -ში გადავიტანოთ, ეს იმპორტი მაინც იმუშავებს, მაგრამ ჩვენ რო ჩვენულებრივი რელატიური იმპორტები გამოგვეყენებინა იმპორტის გზის შეცვლას ვერ ავირიდებდით, რაც ალბათ მეთანხმებით რომ ძალიან კარგია.

აბსოლუტურ იმპორტებს კიდევ რამოდენიმე პატარა ბონისი აქვთ, ერთერთი არის ბევრად მოკლე იმპორტის გზა, რომ არა აბსოლუტური იმპორტები ასეთი რამის დაწერა მოგვიწევდა import LoginForm from '../../../componenets/FormOutline'-რომელიც ბევრად გრძელია, კიდევ ერთი ბონუსი ის არის რომ ფაილები ბევრად ადვილი საპოვნელია და IDE-ის დახმარების გარეშეც ადვილად ვიპოვით, მაგრამ ამ ნაწილის გამარტივება კიდევ შეიძლება, თუ როგორ შემდეგ სექციაში შეგიძლიათ ნახოთ,

აბსოლუტური იმპორტების გამოყენება ყველა ფაილში სავადებულუა, ორი გამონაკლისის გარდა, პირველი ის შემთხვევა არის თუ ისინი სულ ერთად იქნებიან მიჯაჭვულები ამაში ვგულსხმობ: კომპონენტის ჰელპერებს, ჰუკებს რომლებიც იგივე საქაღალდეში არიან, გვერდის ფაილში მოთავსებულ ლოკალური კომპონენტების გამოყენებაზეც რელატიური იმპორტების გამოყენება შეიძლება, და მეორე გამონაკლისის ნახვა შემდეგ სექციაში შეგიძლიათ ⏬⏬⏬

II. Exporting with index files

წინა სექციაში ვახსენე რომ import FormOutline from '@/components/FormOutline'-ს გამარტივება კიდე შეგივიძლია, ძალიან კარგი იქნებოდა რომ უბრალოდ ასე: import {LoginForm, FormOutline} from 'componenets' შეგვეძლოს ფაილების დაიმპორტება, მაგრამ ეს როგორ გავაკეთოთ 🤔🤔🤔🤔, საბედნიეროდ ეს საკმაოდ მარტივია, მოდი ადვილი სცენარი წარმოვიდგინოთ: ჩვენ კომპონენტ საქაღალდეში გვაქ 2 ფაილი LoginForm.jsx, FormOutline.jsx, ამ ფაილებიდან defaul export-ები არიან კომპონენტები, მოდი აქ src/components-ში შევქმანთ ერთი index.js-ი ეს სახელი აუცილებელია არ შეცვალოთ, ნუ რათქმაუნდა ts-ით შეგიძლიათ დააბოლოოთ, მოდი ამ ფაილში ასეთი რამ ჩავწეროთ:

export { default as FormOutline } from './FormOutline';
export { default as LoginForm } from './LoginForm'

ეხლა ჩვენ Login.jsx-ში რომ ვცადოთ import {LoginForm, FormOutline} from 'componenets'-ით დაიმპორტება ეს იმუშავებს 🤯, მოდი განვმარტავ ზუსტად რა ვქენით: ჩვენ formOutline და LoginForm-ი დავაიმპორტეთ index.js-ში რის შემდეგაც ამ ფაილების default export-ებს დავარქვით სახელი და named export-ად გადავაქციეთ რის გამოც ჩვენ Login.tsx-ში ერთი იმპორტ ბრძანებაში შევძელით ორი ფაილს დაიმპორტება, ესეთი დაეხპორტების გზა რომ არა ორი ხაზის დაწერა მოგვიწევდა, რაც რათქმუნდა ბევრი არ არის მარა უფრო დიდ მაშტაბზე მომაბეზრებელი ხდება და ცუდი საკითხავი ეგეთი იმპორტები, და ასევე შეცდომა შეიძლება ადვილად გაიპოროს დაიმპორტების გზაში ასე კი არაფერი არ შეგვეშლება.

index.js/index.ts-ით დაექსპორტება სავალდებულოა ყველა საქაღალდიდან, გამონაკლისის გარეშე, თუ საქაღალდე გვაქ მაქედან დაექსპორტებული უნდა იყოს index.js-ით ფაილები, თუ საქაღალდეები არის საქაღალდეში მოთავსებული მაგალითად pages/Login/Login.jsx-ი ჩვენ ჯერ Login.jsx-ი უნდა დავაეხპორტოთ index.js-ით pages/Login/index.js-იდან და მერე pages/index.js-იდან დავაექსპორტოთ ისევ ეს, და ამის გამო შევძლებთ რომ პირდაპირ pages-იდან დავაიმპორტოთ რაც გვსურს, ყველა ფაილში ასეთი ლოგიკა უნდა იყოს.

და როგორც წინა სექციაში ვახსენე სწორედ ეს არის რელატიური იმპორტების გამონაკლსი, index.js-ი და მისგან დაექსპორტებული ფაილი ერთად იქნებიან, თუ მას ადგილი შევუცვალეთ ექსპორტი ისედაც უნდა ამოვშალოთ

III. Drawbacks

აბსოლიტური იმპორტების მინუსი ის არის რომ ძალიან დიდი იმპორტები გამომგვდის ხოლმე რაც შეიძლება მერე გაძნლდეს, ეს გემოვნებაზეა დამოკდებული მაგრამ დიდი პრობლემა ეს არ იქნება დიდ პროექტებში.

ინდექს ფაილებით დაექსპორტებას კი საკმაოდ დიდი მინუისი აქვს, tree shaking, როცა ჩვენ ვიყენებთ import { OneComponent } from 'file-with-many-components' თქვენ შეიზლება იფიქროთ რომ ეს მარტო ამ კომპონენტს დაიმპორტებს და მართალიც იქნებით ამ აზრში მაგრამ არსებობს ზოგიერთი სტეკი რომელიც ამას არ ასაპორტებს, მაგალითად nextjs ეს სწორად მუშაობს pages საქაღალდეში მაგრამ app საქაღალდის აპლიკაციის სტილში იმის მაგივრად რომ ერთი კომპონნეტი დაიმპორტოს ყველაფერს დაიმპორტებს! და თქვენი გვერდები გაიტენება.

ეს ზემოთ ხსენებული პრობლემა მოგვარებულია vite-ის პროექტებში და nextjs როცა pages საქაღალდეს ვიყენებთ, ამის გამო სანამ ღრმათ მიხვალთ პროექტში ეს ცნობილ იბაგი გაითვალისწინეთ და დასერჩეთ barrel file-ებთან თუ აქვს პრობლემა თქვენ მიერ არჩეულ bundler-ს.

ეს პრობლემა ასევე არის ხოლმე გარე ლაიბრარებზე, მაგალითად material ui და ასე შემდეგ, საბედნეროთ ეს კერძო ქეისი ბევრად ხშირია და უმეტესობა ბანდლერში მოგვარებულია, მაგრამ დეფოლტად არ იქნება მოგვარებული და ყურადღბა მიაქციეთ.

რამოდენიმეჯერ ვახსსენე რომ ყურადღება უნდა მიაქციოთ ზომას მაგრამ არ ამიღწერია როგორ, ზომის ფაილების მიაქცევა საკმაოდ ადვილია თუ nextjs იყენებთ build-ის დროს რეპორტი იწერება თუ პეჯები რა ზომა გამოვიდა, ასევე არსებბოოს next bundle analyzer რომელიც უფრო დეტალებში დაგეხმარებათ გაარკვიოთ რომელი გვერდი/ფაილი/ლაიბრარი იწვევს ზომის პრობლემებს, ალტერნეტივა ამისი ასევე არსებობს vite-ში სამწუხაროდ პეჯებად დაყოფა არ აქვს რახანც ფაილური რაუტინგი არ არის vite-ში 🙌

ზომის ყურადღების მიქცევა ზოგადად სულ კარგი იდეაა, ძალიან მნშიელოვანია js-ის ზომა ფრონტენდ აპლიაკციებში.