Ето как да мащабирате този модел към по-големи проекти...

Страхотна статия, благодаря!

Бих искал да предложа подобрение, а то е - можете да вложите своя монолитен вътрешен индекс, което прави семантиката около импортирането много по-логична и ще се мащабира към по-големи проекти.

Правилата са следните:

• добавете индекс файл за папка с файлове, което експортира всички файлове
• в папка, ТРЯБВА да импортирате братя и сестри директно
• извън папка, ТРЯБВА да импортирате от индекса на целевата папка

Проектът на библиотеката, който ще демонстрирам тук, има около 40–50 файла и около 30 от тях са експортирани и тези правила ме спасиха от някои неприятни кръгови зависимости.

Така че нека вземем произволна листова папка lib/components/browser/, която съдържа около 10 файла, необходими за изобразяване на компонент на браузъра.

Той има index.ts файл, който експортира компоненти, които искаме да използваме другаде:

import Browser from './Browser.vue'
import BrowserPage from './BrowserPage.vue'
import BrowserStack from './BrowserStack.vue'

export {
  Browser,
  BrowserPage,
  BrowserStack,
}

Всеки компонент в тази папка ТРЯБВА да импортира директно зависимости на братя и сестри, но ако иска да импортира файлове, които НЕ са братя и сестри, може да направи това чрез индекса на тази група:

// Browser.vue
// importing siblings (these did not need to be globally exported)
import BrowserUrl from './BrowserUrl.vue'
import BrowserHead from './BrowserHead.vue'
import BrowserPage from './BrowserPage.vue'
// importing unrelated files
import { WindowModel, TabModel } from '../../state'

Има случаи, когато ще можете да се измъкнете с импортиране на братя и сестри с помощта на индексния файл, но е трудно да се определи кога работи и прави кода непоследователен:

// WorkspaceModel.ts
import { TabInfo, TabModel, WindowModel } from '.'

Обратно към папката browser/, файлът parentlib/components/index.ts може след това да извърши друго масово експортиране на всички подпапки в components/:

export * from './tour'
export * from './app'
export * from './browser'

И накрая, коренът на библиотеката lib може да експортира всичко отново:

export * from './state'
export * from './utils'
export * from './mediators'
export * from './components'

Всяка от другите папки (state/, utils/, mediators/ и т.н.) трябва да импортира и експортира собствените си файлове, като използва същите правила.

По този начин никога няма кръгови препратки, всичко остава модулно и Rollup / Webpack няма да се оплаче!

rollup v2.7.3
bundles src/index.ts → dist/controlspace-tour.js...
created dist/controlspace-tour.js in 5.7s
bundles src/index.ts → dist/controlspace-tour.esm.js...
created dist/controlspace-tour.esm.js in 1.9s

Имам много по-голям проект на работа (100 файлове), който използва същата стратегия, за да направи файловете достъпни за други модули, и без кръгови зависимости.

Надяваме се, че това ще бъде полезно за всеки, който идва след това.

Наздраве :)