Автозагрузка модулей с использованием динамического импорта

[Taraflex]

Если используется typescript то в нем из коробки есть алиясы путей
пример

tsconfig.json

{
    "compilerOptions": {
        "checkJs": false,
        "allowJs": true,
        "alwaysStrict": true,
        "baseUrl": ".",
        "downlevelIteration": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "moduleResolution": "node",
        "noEmitHelpers": true,
        "noEmitOnError": true,
        "removeComments": false,
        "resolveJsonModule": true,
        "strictBindCallApply": true,
        "allowSyntheticDefaultImports": true,
        "target": "esnext",
        "jsx": "react",
        "jsxFactory": "m",
        "lib": [
            "dom",
            "esnext"
        ],
        "paths": {
            "flarum/components/*": [
                "../../vendor/flarum/core/js/src/common/components/*",
                "../../vendor/flarum/core/js/src/admin/components/*",
                "../../vendor/flarum/core/js/src/forum/components/*"
            ],
            "flarum/utils/*": [
                "../../vendor/flarum/core/js/src/common/utils/*",
                "../../vendor/flarum/core/js/src/admin/utils/*",
                "../../vendor/flarum/core/js/src/forum/utils/*"
            ],
            "flarum/helpers/*": [
                "../../vendor/flarum/core/js/src/common/helpers/*"
            ],
            "flarum/models/*": [
                "../../vendor/flarum/core/js/src/common/models/*"
            ],
            "flarum/*": [
                "../../vendor/flarum/core/js/src/common/*",
                "../../vendor/flarum/core/js/src/admin/*",
                "../../vendor/flarum/core/js/src/forum/*"
            ]
        }
    },
    "exclude": [
        "vendor",
        "storage",
        "public",
        "dist",
        "node_modules"
    ]
}

При этом не ломается автокомплит и проверка типов в ide
При использовании webpack можно подключить www.npmjs.com/package/tsconfig-paths-webpack-plugin тогда алиасы будут работать для всех загрузчиков, использующих вебпаковский ресолвер путей.

[melodyn]

Про tsconfig не знал, а динамический импорт заинтересовал, как инструмент нативный и хотелось больше добавить контента по теме :) На досуге изучу возможности paths, интересно, покрывает ли она кейсы как с динамическим импортом.

[justboris]

Если я правильно понял статью, то все это затевается ради возможности не писать вот этот index.ts

import a from './modules/a';
import b from './modules/b';
import c from './modules/c/bobule.ts';

export default {
  module: a,
  dopule: b,
  bobule: c
};

На самом деле, от этого файла есть большая польза – он показывает публичное API, а все что остается не экспортированным, считается приватным и использоваться напрямую не должно.

Во-вторых, содержимое этого файла можно сократить, используя синтаксис export .. from

export {default as module} from './modules/a';
export {default as dopule} from './modules/b';
export {default as bobule} from './modules/c/bobule.ts';

[melodyn]

Этот файл надо каждый раз обновлять в ручную, а автозагрузка, по сути, делает это за разработчика. Мой кейс использования — автозагрузка всего однотипного (роутов / стратегий авторизаций / etc..), где, в общем-то, всё можно сделать в цикле.

[rustalenin]

Честно говоря не очень понял, почему это динамический импорт, а не автоспорт проекта.

На конкретном примере, у меня есть модули с переводом приложения на разные локали, обычно это импортируемый js объект с парой тысяч ключей — строк перевода.

На последнем проекте я экспериментировал с тем, что по умолчанию испортился только модуль английского языка при инициализации приложения. В момент получения данных пользователя, если у него выбран не английский язык — динамически испортится модуль с нужным языком.

И если пользователь меняет язык, происходит проверка, загружен ли этот язык и если, происходит его динамический импорт.