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
Любовь ❤️