Как вызвать статический метод TypeScript из HTML с webpack

Быстрый ответ

Если нужно вызвать функции, которые были скомпилированы с использованием webpack, в HTML-скрипте, следует применять параметр output.library в конфигурации webpack. Это позволит назначить глобальное имя (namespace) для экспортируемых функций.

Ваш module.js может иметь такой вид:

// Экспортируем функцию: просто и легко.
export function myFunction() {
    // Ваша функция могла бы делать что-то уникальное!
}

После этого в webpack.config.js произведите необходимые изменения:

// 'MyLib' станет именем вашей библиотеки в браузере
module.exports = {
    output: {
        library: 'MyLib',
        libraryTarget: 'var'
    },
};

А в HTML коде:

<script src="bundle.js"></script> <!-- Здесь подключается ваш webpack-бандл -->
<script>
    MyLib.myFunction(); // Так вы погружаетесь в чарующий мир вызова функций
</script>

bundle.js – это файл, получившийся в результате компиляции. "MyLib" замените на ваше namespace, а "myFunction" — на имя требуемой функции.

[AsideBanner]

Экспортируйте функционал с глобальным именем

Применение library и libraryTarget для создания глобального пространства имен поможет упорядочить ваш код. Этот подход уменьшает вероятность конфликтов имен и делает работу с кодом более комфортной.

Безопасное выполнение асинхронных операций с Promises

Когда ваш код, скомпилированный webpack'ом, включает асинхронные процессы, оберните его экспорты в Promises. Так вы убедитесь, что все компоненты будут полностью загружены и готовы к работе перед тем, как они будут глобально использоваться.

Применение синтаксиса ES6 для обеспечения элегантности и читаемости

Использование синтаксиса ES6 import/export делает код более структурированным и чистым, значительно повышая его читаемость.

Гибкость настройки webpack

Применяйте параметр libraryTarget со значением 'umd', чтобы обеспечить совместимость вашего кода с разными системами модулей, например, AMD и CommonJS.

Визуализация

Можно представить себе код, скомпилированный с помощью webpack, как программу, а глобальную переменную – как ссылку для доступа к ней. Это упрощает вызов и управление функциями внутри вашего приложения.

Многостраничные приложения: один сборщик для всех страниц

Использование одного webpack-бандла на нескольких страницах делает проект более управляемым и оптимизированным.

Контролируйте пути и названия

Будьте уверены, что пути к файлам и их называния в webpack.config.js верны. HTML-тег script должен правильно ссылаться на webpack-бандл.

Избегайте использования require в браузере

Не используйте require в script-тегах. Этот метод предназначен для Node.js, и он может работать некорректно в браузерах.

Полезные материалы

1. Создание библиотек | webpack
2. Вызов скомпилированного кода webpack из вне (HTML script tag) – Stack Overflow
3. Выходные данные | webpack
4. Федерация модулей | webpack
5. Внешние модули | webpack
6. Оптимизация производительности с помощью webpack – LogRocket Blog