javascript - Có phải tất cả các export trong index.ts đều được tải vào các module không

Tôi có một tệp index.ts với nhiều xuất khẩu trong dự án react + typescript của mình. Tôi đang sử dụng tệp đó để nhập các thứ từ đó. Tôi có nhiều hơn một tệp index.ts trong dự án và điều này đôi khi gây ra các phụ thuộc vòng trong dự án của tôi đặc biệt là khi viết các bài kiểm tra sử dụng jest.

Câu hỏi của tôi là sẽ xảy ra điều gì khi tôi nhập một hoặc nhiều thứ từ các tệp index.ts? Liệu webpack có sử dụng tệp này để tìm đường dẫn và chỉ tải mô-đun được yêu cầu thông qua đường dẫn hay tất cả các thứ được xuất ra đều được tải vào hàm? (ví dụ bên dưới thì A và B có được tải vào C hay chỉ có A được tải vào C bởi webpack?)

đây là một mẫu đơn giản của loại phụ thuộc vòng tròn như vậy:

    // -- index.ts --
    export {default as A} from './A'
    export {default as B} from './B'
    export {default as C} from './C'

    // -- A.tsx --
    import { B, C } from './index'

    export class A{
    /* as is */ 
    }

    // -- B.tsx --
    import { A} from './index'

    export class B extends A {
   /* as is */ 
   }

   // -- C.tsx --
   import { A} from './index'

   export class C extends A {
   /* as is */   
   }

Theo điều này, tôi giả sử rằng có một kho lưu trữ trung tâm cho webpack mà tất cả các import này được lưu trong đó và bất cứ khi nào một import xảy ra, nó sẽ kiểm tra ở đó trước và nếu không tìm thấy, nó sẽ cố gắng tìm module. Trong trường hợp này, giả định của tôi rằng tất cả các export từ index.ts đều được tải là sai.

Tôi đang tìm kiếm sự giúp đỡ để trả lời sự mơ hồ của tôi về tất cả những hành vi này của webpack, nodeJs, typescript hoặc bất cứ thứ gì chịu trách nhiệm cho điều này

Câu trả lời #1

Webpack chỉ tải các module cụ thể được nhập trong mã của bạn chứ không phải toàn bộ tệp.

Trong ví dụ bạn cung cấp, khi bạn nhập B và C từ index.ts trong A.tsx, webpack sẽ chỉ tải các module B và C mà không tải toàn bộ file index.ts. Tương tự, khi bạn nhập A từ index.ts trong B.tsx và C.tsx, chỉ module A sẽ được tải.

Về câu hỏi của bạn về các phụ thuộc vòng tròn, webpack có thể xử lý các phụ thuộc vòng tròn, nhưng điều đó có thể dẫn đến hành vi không mong muốn. Tốt nhất là nên tránh chúng bất cứ khi nào có thể để có một cơ sở mã dễ bảo trì.