Browser QuickStart
TypeScript in the browser
Якщо ви використовуєте TypeScript для створення веб-програми, ось мої рекомендації щодо швидкого налаштування проекту TypeScript + React (мій обраний фреймворк інтерфейсу користувача).
General Machine Setup
Project Setup Quick
Використовуйте https://github.com/basarat/react-typescript як основу.
Тепер використовуйте його як основу та перейдіть до розробити свою дивовижну програму
Project Setup Detailed
Якщо ви хочете дізнатися більше про те, як цей проект створюється (замість того, щоб використовувати його як основу), ось кроки щодо його налаштування з нуля:
Створіть каталог проекту:
Створіть
tsconfig.json
:
Створіть
package.json
.
Створіть
webpack.config.js
, щоб об’єднати свої модулі в один файлapp.js
, який містить усі ваші ресурси:
файл
src/templates/index.html
. Він використовуватиметься як шаблон дляindex.html
, створеного webpack. Згенерований файл буде в папціpublic
, а потім обслуговуватиметься з вашого веб-сервера:
src/app/app.tsx
, який є точкою входу вашої зовнішньої програми:
Develop your amazing application
Ви можете отримати найновіші пакунки за допомогою
npm install typescript@latest react@latest react-dom@latest @types/react@latest @types/react-dom@latest webpack@latest webpack-dev-server@latest webpack-cli@latest ts-loader@latest clean-webpack-plugin@latest html-webpack-plugin@latest --save-exact
Виконуйте живу розробку, запустивши
npm start
.Відвідайте http://localhost:8080
Відредагуйте
src/app/app.tsx
(або будь-який файл ts/tsx, який певним чином використовуєтьсяsrc/app/app.tsx
) для живого перезавантаження програми.Відредагуйте
src/templates/index.html
і отримайте перезавантаження сервера в реальному часі.
Створюйте продакшен збірку, запустивши
npm run build
.Перенісіть папку
public
(яка містить створені ресурси) з вашого сервера.
Last updated