typescript - შეცვალეთ ნაგულისხმევი ფაილის რეზოლუცია JavaScript-ში

JavaScript პროექტში, ფაილი სახელწოდებით index.js შეიძლება აიმპორტოს ასე:

import SomeComponent from 'components/some-component'

სამედიცინო index.js-ის მითითების ნაცვლად.

ჩემი პროექტში, მე ვაკონტროლებ სხვა სახელების კონვენციის გამოყენებას: some-component.component.js. ამ გზით მე შემიძლია შევამჩნიო, რა ტიპის ფაილია ერთხანს (მალევე, ვიდრე მილიარდი index.js-ის საშუალებით).

რაც მე ვცდილობ, არის იგივე იმპორტის სქემის გამოყენება ფაილებსა, რომლებსაც აქვთ ტემპლეტი *.component.js. სხვა სიტყვებით:

import SomeComponent from 'components/some-component'

სათანადო წილს მიიღოს

import SomeComponent from 'components/some-component/some-component.component.js'

მე მაქვს შემდეგი (განმარტებითი) jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "*": ["./*"]
    }
  }
}

ყოველი იდეა ამისა მიღწევის შესახებ?

გმადლობთ წინასწარ!

პასუხი #1

მსხვერპლადი პასუხი: არ შეგიძლიათ იმპორტის გადაწყვეტის მორგება ფუნქციის (ან RegExp) გამოყენებით. ვებ-პროექტისთვის, შეგიძლიათ გამოიყენოთ ისეთი ინსტრუმენტი, როგორიცაა Webpack, სარეგისტრაციო დამატებითი ლოდერით. მაგრამ ეს არის სპეციალურად Webpack-ის გადაწყვეტილება, რომელიც არ იმუშავებს სხვა ინსტრუმენტებთან (მაგალითად, Ctrl-click VSCode-ში ან TSC-ის პირდაპირ გამოყენების დროს).

დეტალური პასუხი:

JavaScript ფაილების გარჩევა დამოკიდებულია იმ ინსტრუმენტებზე, რომელიც იყენებთ. სტანდარტები ცოტა ხნით შეიცვალა წლების განმავლობაში, და მიუხედავად იმისა, რომ ყველაფერი იკრიბება ESM-ში, ჯერ კიდევ არსებობს ბევრი შეუთანხმებლობა.

TypeScript მოდულის გარჩევადობა აღწერილია აქ: https://www.typescriptlang.org/docs/handbook/module-resolution.html თქვენ შეგიძლიათ გქონდეთ baseUrl, შეაერთოთ მრავალი დირექტორია ერთში (rootDirs) ან გქონდეთ შეზღუდული სიმბოლოების mapping გზა. (https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping). თქვენ უკვე იყენებდით თქვენს შეკითხვას, ამიტომ, ალბათ, ახალს არაფერს გეტყვით. მაგრამ, აქ მთავრდება TS კონფიგურაციის პარამეტრები. (შეგიძლიათ დააკონფიგურიროთ კომპილაციის მოდულის გარჩევადობა TSC API-ის გამოყენებით, მაგრამ არა CLI/ინსტრუმენტების კონფიგურაციის ვარიანტებიდან)

NodeJS შეგიძლია აკავშიროს მოდულების დასარეზოლუციო მექანიზმი. მაგალითად, Yarn 2+ ამას აკეთებს PNP (https://yarnpkg.com/features/pnp) ფუნქციის მხარდასაჭერად. თუმცა, TypeScript მაინც საჭიროებს ტიპების დასარეზოლუცირებას და ის არ გამოიყენებს თქვენს კასტომიზებულ დასამატებელ მექანიზმს ამისთვის. სიტუაცია სხვა ინსტრუმენტებთან, როგორიცაა Webpack, მსგავსია.

Node-ისა და TypeScript-ის მოდულის რეზოლუცია განსაკუთრებულია სწორედ ამ ინსტრუმენტებისთვის. ESM სტანდარტი კიდევ უფრო მკაცრია: from ნაწილი უნდა იყოს აბსოლუტური ან რელატიური URL, ან „ანტისატიკური იდენტიფიკატორი“, რომლის რუკასაც import map-ის გამოყენებით გეგმავთ. სხვა სიტყვებით, თქვენ ვერ შექმნით საფარს რეზოლუციისთვის შესაბამის კურსორის ალგორითმს. ამის გამართლებას აღწერს Import Maps-ის სტანდარტის რეპოზიტორი: https://github.com/WICG/import-maps#a-programmable-resolution-hook

დასკვნა: თუ ნამდვილად-ნამდვილად გსურთ შექმნათ მორგებული მჭრის მოდულის გადაწყობა, შეიძლება შეძლოთ თქვენი საკუთარი CLI-ის შექმნა TSC API-ის გამოყენებით. შესაძლოა ეს არ იმუშაოს სხვა საშუალებებთან და ალბათ უფრო მარტივია სხვა სახელების კონვენციაზე მიჩვევა.