Введение

Если вы находитесь в мире веб-разработки, вы, скорее всего, хорошо разбираетесь в javascript. Если нет, я умоляю вас проверить некоторые ресурсы, касающиеся javascript и typescript, прежде чем продолжить эту статью. Если вы используете несколько тегов сценария в своем html-заголовке, есть некоторые приемы, такие как ключевое слово defer, чтобы оптимизировать время и способ выполнения сценариев. Большинство современных javascript использует синтаксис импорта модуля ES6, чтобы файлы javascript могли извлекать информацию друг из друга. Однако это создает следующую проблему для проекта: теперь выполняется несколько сетевых запросов для загрузки кода javascript. Эффект от этого будет постепенно замедлять время загрузки ваших страниц по мере того, как будет выполняться больше запросов. В этой статье мы рассмотрим инструмент под названием webpack, который был создан для решения этой проблемы, и узнаем, как добавить его в проект typescript.

Что такое вебпак?

Webpack в самых упрощенных терминах — это инструмент, используемый для объединения нескольких сетевых файлов javascript в один связанный файл javascript для уменьшения веб-трафика. Обычно принято называть этот связанный файл javascript bundle.js. Вы по-прежнему можете получить доступ к исходному машинописному/javascript-коду через инструменты разработчика с помощью параметра, который мы покажем позже. Также важно отметить, что ваша исходная файловая структура для вашего машинописного текста и javascript по-прежнему будет доступна в вашем текстовом редакторе. Давайте перейдем к тому, как интегрировать веб-пакет в проект машинописного текста!

Интеграция Webpack в Typescript

В предыдущей статье я рассказывал, как установить typescript и что это такое. Теперь мы рассмотрим установку webpack. Следующая команда должна быть введена в ваш терминал в корне вашего проекта машинописного текста (мы рассмотрим, что некоторые из них делают через секунду)

npm install –save-dev webpack webpack-cli webpack-dev-server typescript ts-loader

вот несколько аспектов этой команды, чтобы у вас было общее представление о том, что они все делают:

  • webpack — инструмент, который объединяет ваш javascript воедино
  • webpack-cli — разрешает некоторые терминальные команды для webpack
  • webpack-dev-server — позволяет раскрутить сервер, на котором хранится наш связанный javascript в памяти.
  • машинописный текст — всегда полезно иметь локальную версию машинописного текста
  • ts-loader — переводит машинописный текст в javascript для веб-пакета.

После завершения установки вы должны изменить несколько вещей в вашем проекте. В вашем html-файле вы захотите изменить тег скрипта, чтобы он указывал на то, где будет находиться ваш bundle.js. Вы также захотите убедиться, что все импорты во всех файлах машинописного текста больше не имеют расширения .ts в конце. Внутри tsconfig.js (о котором у меня есть статья) вы должны убедиться, что для цели и модуля установлено значение ES6. Вы также должны убедиться, что для moduleResolution установлено значение node, ваша опция rootDir закомментирована, а для sourceMap установлено значение true. Теперь в корне вашего проекта вам нужно создать специальный файл webpack.config.js, который будет искать webpack. В нем вы собираетесь определить настройки, которые вы хотите использовать в веб-пакете. Для простоты я смешал один с некоторыми комментариями, которые обозначают, что делают определенные параметры. Идите вперед и посмотрите:

После того, как это настроено и сохранено, вы можете запустить сервер, введя следующую команду в корне вашего проекта в терминале:

npm run build

Как только это будет запущено, вы можете перейти на страницу и убедиться, что количество сетевых запросов уменьшилось, проверив вкладку сети в devtools.

Заключение

Благодаря этому мы создали оптимизированную версию нашего кода javascript, которая приведет к небольшому количеству сетевых запросов и увеличению скорости работы нашего приложения при загрузке. Существует множество других параметров, которые вы можете настроить в webpack.config.js, поэтому не стесняйтесь просматривать документацию, чтобы не чувствовать себя ограниченным этим примером. Я надеюсь, что это представило хорошую утилиту, которую вы, возможно, захотите использовать в будущем в своих веб-приложениях. До следующего раза, удачи и счастливого кодирования!