TypeScript in the browser
Якщо ви використовуєте TypeScript для створення веб-програми, ось мої рекомендації щодо швидкого налаштування проекту TypeScript + React (мій обраний фреймворк інтерфейсу користувача).
General Machine Setup
Project Setup Quick
Використовуйте https://github.com/basarat/react-typescript як основу.
Copy git clone https://github.com/basarat/react-typescript.git
cd react-typescript
npm install Тепер використовуйте його як основу та перейдіть до розробити свою дивовижну програму
Project Setup Detailed
Якщо ви хочете дізнатися більше про те, як цей проект створюється (замість того, щоб використовувати його як основу), ось кроки щодо його налаштування з нуля:
Створіть каталог проекту:
Copy mkdir your-project
cd your-project
Copy {
"compilerOptions" : {
"sourceMap" : true ,
"module" : "commonjs" ,
"esModuleInterop" : true ,
"resolveJsonModule" : true ,
"experimentalDecorators" : true ,
"target" : "es5" ,
"jsx" : "react" ,
"lib" : [
"dom" ,
"es6"
]
} ,
"include" : [
"src"
] ,
"compileOnSave" : false
}
Copy {
"name" : "react-typescript" ,
"version" : "0.0.0" ,
"license" : "MIT" ,
"repository" : {
"type" : "git" ,
"url" : "https://github.com/basarat/react-typescript.git"
} ,
"scripts" : {
"build" : "webpack -p" ,
"start" : "webpack-dev-server -d --content-base ./public"
} ,
"dependencies" : {
"@types/react" : "16.4.10" ,
"@types/react-dom" : "16.0.7" ,
"clean-webpack-plugin" : "0.1.19" ,
"html-webpack-plugin" : "3.2.0" ,
"react" : "16.4.2" ,
"react-dom" : "16.4.2" ,
"ts-loader" : "4.4.2" ,
"typescript" : "3.0.1" ,
"webpack" : "4.16.5" ,
"webpack-cli" : "3.1.0" ,
"webpack-dev-server" : "3.1.5"
}
} Створіть webpack.config.js, щоб об’єднати свої модулі в один файл app.js, який містить усі ваші ресурси:
Copy const { CleanWebpackPlugin } = require ( 'clean-webpack-plugin' );
const HtmlWebpackPlugin = require ( 'html-webpack-plugin' );
module . exports = {
entry : './src/app/app.tsx' ,
plugins : [
new CleanWebpackPlugin ({
cleanAfterEveryBuildPatterns : [ 'public/build' ]
}) ,
new HtmlWebpackPlugin ({
template : 'src/templates/index.html'
}) ,
] ,
output : {
path : __dirname + '/public' ,
filename : 'build/[name].[contenthash].js'
} ,
resolve : {
extensions : [ '.ts' , '.tsx' , '.js' ]
} ,
module : {
rules : [
{ test : /\.tsx ?$ / , loader : 'ts-loader' }
]
}
} файл src/templates/index.html. Він використовуватиметься як шаблон для index.html, створеного webpack. Згенерований файл буде в папці public, а потім обслуговуватиметься з вашого веб-сервера:
Copy < html >
< body >
< div id = "root" ></ div >
</ body >
</ html >
src/app/app.tsx, який є точкою входу вашої зовнішньої програми:
Copy import * as React from 'react' ;
import * as ReactDOM from 'react-dom' ;
const Hello : React . FunctionComponent <{ compiler : string , framework : string }> = (props) => {
return (
< div >
< div >{ props .compiler}</ div >
< div >{ props .framework}</ div >
</ div >
);
}
ReactDOM .render (
< Hello compiler = "TypeScript" framework = "React" /> ,
document .getElementById ( "root" )
); 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.
Відредагуйте src/app/app.tsx (або будь-який файл ts/tsx, який певним чином використовується src/app/app.tsx) для живого перезавантаження програми.
Відредагуйте src/templates/index.html і отримайте перезавантаження сервера в реальному часі.
Створюйте продакшен збірку, запустивши npm run build.
Перенісіть папку public (яка містить створені ресурси) з вашого сервера.
