ค้นหาเว็บไซต์

javascript - ส่งออกไฟล์ทั้งหมดใน `index.ts`


ต้องการที่จะสามารถนำเข้าคอมโพเนนต์ใด ๆ ในไดเรกทอรี components โดยตรงจากไดเรกทอรี components

โครงสร้างไดเรกทอรีปัจจุบันคือ:

src
├── components
│   ├── Camera.tsx
│   ├── Keyboard.tsx
│   └── index.ts
└── screens
    └── App.tsx

และต้องการที่จะสามารถนำเข้าได้ดังนี้:

// src/screens/App.tsx

import { Keyboard } from '../components'

ตัวเลือกแรกชัดเจนว่าจะต้องเก็บรายชื่อการส่งออกยาว ๆ ไว้ใน src/components/index.ts:

// src/components/index.ts

export { Camera } from './Camera'
export { Keyboard } from './Keyboard'

อย่างไรก็ตาม นี่เป็นเรื่องยุ่งยากในการดูแล มีวิธีใดบ้างที่ใช้ glob และอ็อบเจ็กต์ export เพื่อส่งออกคอมโพเนนต์ทั้งหมดโดยอัตโนมัติ หรืออาจเป็นวิธีอื่นทั้งหมด?

คำตอบ #1

คุณสามารถทำได้โดยการแก้ไข index.ts ของคุณให้เป็นแบบนี้

src
├── components
│   ├── Camera.tsx
│   ├── Keyboard.tsx
│   └── index.ts <=== this file
└── screens
    └── App.tsx
export * from './Camera'
export * from './Keyboard'

คำตอบ #2

เนื่องจากคุณกำลังใช้ TypeScript ทำไมไม่ลองใช้ paths ใน TsConfig ตามที่อธิบายไว้ที่นี่ล่ะ?

บทความที่เกี่ยวข้อง