Добро пожаловать, читатель, снова в другой раз, где я пытаюсь облегчить некоторые из головных болей, с которыми ежедневно сталкиваются разработчики, объясняя техническую тему и предоставляя простые шаги для внедрения новой технологии. Этот блог посвящен тому, как вы можете интегрировать TypeScript в свой рабочий процесс Webpack.
Для тех из вас, кто мало что знает или не очень хорошо знаком, Webpack — это сборщик модулей JavaScript, но он также может объединять другие типы ресурсов, такие как HTML, CSS и другие. У меня есть пара блогов, которые могут помочь в том, как начать использовать Webpack и как настроить Webpack. Чтение этих двух блогов определенно поможет вам лучше понять этот блог.
TypeScript — это типизированный надмножество JavaScript, который компилируется в обычный JavaScript. Недавно я написал блог, в котором подробно рассказал о TypeScript и его преимуществах. Если вам интересно, нажмите здесь.
Предпосылки
Я предполагаю, что на вашем компьютере уже установлен Node.js. Сначала давайте проверим, что у вас установлен TypeScript. Введите следующую команду в свой терминал:
tsc -v
Если у вас установлен TypeScript, это вернет версию, которую вы установили, если у вас не установлен TypeScript, введите эту команду в своем терминале:
npm i -g typescript
Это позволит установить TypeScript глобально на вашем компьютере, что означает, что вы можете использовать его в любом проекте в вашей локальной среде.
Еще одно предположение, которое я делаю, заключается в том, что у вас уже настроен рабочий процесс Webpack. На случай, если вы не прочитаете блоги, о которых я упоминал ранее.
Интеграция начинается
Первый шаг — настроить компилятор TypeScript. Для этого нам нужно создать файл tsconfig.json в корне вашего проекта. Внутри этого файла добавьте следующий код:
Это предоставит компилятору TypeScript необходимую информацию для правильной компиляции нашего кода.
Следующим шагом будет добавление двух новых зависимостей devDependencies в ваш рабочий процесс. Введите следующую команду, чтобы добавить эти devDependencies:
npm i -D typescript ts-loader
Теперь нам нужно настроить Webpack для использования новых пакетов, которые мы установили, чтобы скомпилировать и связать наши файлы TypeScript.
В файле webpack.config.js введите следующее правило:
Также в файле webpack.config.js мы должны добавить параметр разрешения. Код показан ниже:
Это все читатели, которым вы успешно интегрировали TypeScript в свой рабочий процесс Webpack. Я хотел бы повторить, что если приведенный выше код или объяснения кажутся запутанными, пожалуйста, прочитайте мои предыдущие блоги, они определенно помогут прояснить ситуацию. Спасибо за чтение, и я надеюсь, что этот блог помог избавить вас от головной боли.
