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

Вы также можете прочитать официальный туториал https://webpack.js.org/guides/typescript/, но я думаю, что мой лучше 😄

Предпосылки:

Убедитесь, что вы знаете основы Webpack! Читайте мою последнюю статью: Зачем нам нужен Webpack?

Установите необходимые зависимости:

npm install — save-dev ts-loader

Убедитесь, что расширение имени файла TypeScript определено в файле конфигурации вашего веб-пакета.

// webpack.dev.config.js
resolve: {
  extensions: ['.ts']
},

Используйте загрузчик, который вы установили ранее.

//webpack.dev.config.js
module: {
  rules: [
    { test: /\.ts$/, loader: "ts-loader" }
  ]
}

Переименуйте все ваши файлы с JavaScript на TypeScript.

app.js -> app.ts

Примечание. Вам также потребуется файл tsconfig.json. Но он может быть и пустым, добавлять туда ничего не нужно.

Убедитесь, что у вас есть скрипт «сборки», определенный в «package.json».

"scripts": {
  ...
  "build": "webpack --config webpack.dev.config.js",
  ...
}

Теперь, если вы выполнитеnpm run build, Webpack создаст пакет JavaScript.

Ссылка на бандл из index.html

// index.html
// Note: Make sure the bundle's path is correct.
<script src="../dist/bundle.js"></script>

Поздравляем, теперь вы знаете, как использовать TypeScript с Webpack! 🚀

Какие версии зависимостей следует использовать?

Эта статья написана в 2020 году. Версии зависимостей меняются со временем, и опыт показывает, что одни пакеты не работают с другими.

Поэтому я перечисляю версии зависимостей, которые используются в этом руководстве:

"ts-loader": "^8.0.4",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"typescript": "^4.0.3"
..

Как использовать горячую перезагрузку и React с Webpack?

Для этого вам нужно прочитать мою следующую статью.

Следите за мной в Твиттере: @codegodzilla
Посетите мой веб-сайт, чтобы узнать больше интересного контента codegodzilla.com

Любовь ❤️