Sådan konfigureres et React TypeScript-projekt fra Scratch med Babel og Webpack

Opdateret: 7. september 2019 - skrivefejl, npm run => npm run-script, eksempler på gistekode

Introduktion

I denne tutorial lærer du, hvordan du opretter et React TypeScript-projekt fra bunden. Jeg antager, at de fleste af jer ved, hvad TypeScript er, og hvad dets fordele er, så jeg vil ikke gå ind i det for meget. Men for dem, der er usikre og er mere interesserede, kan du finde mere information om det her. Lad os nu undersøge, hvordan du opsætter et React TypeScript-projekt fra bunden.

Opsætning og forklaring

Til at begynde med er vi nødt til at sikre, at du har den rigtige filstruktur som vist på billedet herunder.

For at replikere det kan du bruge disse kommandoer:

mkdir react-typescript-kedelplade
cd-reaktion-typeskript-kedelplade
mkdir -p src / komponenter src / styles

Bemærk: Flagget -p står for forældre og giver dig mulighed for at oprette overordnede mapper sammen med deres børnemapper. Prøv den sidste kommando uden -p for at se.

Sørg for, at du har node og npm installeret på din maskine, hvis du ikke er i tvivl om at bruge npm -v til at kontrollere din version af npm. Hvis du ikke har det installeret, skal du installere det her.

Når du har bekræftet, at du har installeret npm, eller at du har installeret det, er vi nødt til at initialisere vores projekt med npm og oprette en package.json.

Skriv npm init for at initialisere projektet, mens du er i / react-typescript-boilerplate. Dette begynder en række prompter til tilpasning af nogle af basisegenskaberne i package.json, du kan også ringe til npm init -y for at springe over disse trin.

Nu hvor vi har oprettet det grundlæggende projekt, skal vi installere nogle pakker, vil jeg også give en kort og forenklet forklaring af, hvad hver pakke gør:

  • webpack og webpack-cli

webpack er simpelthen en modulbundter. Selvom det kan bundle næsten enhver ressource eller aktiv, bruges det oftest til at bundle JavaScript-filer til brug i en browser, i dette tilfælde vil det bundle eller .tsx og .ts-filer i .js, så det kan serveres.

npm installere webpack webpack-cli - save-dev
  • reagerer og reagerer dom

Vi har også brug for reaktions- og reaktionsdomspakkerne. react er nødvendigt for at definere React-komponenter, og react-dom-pakken bruges som indgangspunkt til DOM (Document Object Model) for nettet, medens den react-native pakke bruges til native miljøer (mobil).

npm installer react react-dom - gem
  • maskinskrift

typescript er installeret for at få adgang til dets fantastiske typekontrolegenskaber.

npm installer typeskript - save-dev
  • babel

babel er en JavaScript-kompilator, og det giver os mulighed for at skrive næste gen-JavaScript (es6, es7, esnext) og vil kompilere til browser-kompatibel JavaScript. Fra Babel 7 har Microsoft og Babel-teamet arbejdet sammen, så du kan bruge babel-loader til at komponere JavaScript. De to installerede plugins er til at fortælle Babel om et par ekstra funktioner, som TypeScript har.

npm installer @ babel / core babel-loader @ babel / preset-react @ babel / preset-typescript @ babel / preset-env @ babel / plugin-forslag-klasse-egenskaber @ babel / plugin-forslag-objekt-resten-spredning - -sparer-dev
  • css-loader og stil-loader

To stillæssere, der vil blive brugt til at kompilere din CSS i webpack.

npm installer css-loader stil-loader - gemme-dev

html-webpack-plugin

npm installere html-webpack-plugin - save-dev
  • webpack-dev-server

webpack-dev-server ser vores ændringer og opdaterer websiden, når der foretages ændringer i vores komponenter.

npm installere webpack-dev-server - save-dev
  • tslint

tslint bruges i din IDE og giver dig understregning af din kode i rødt, hvis den ikke overholder de regler, du har angivet i tslint.json.

npm installere tslint tslint-uforanderlig - gemme-dev
  • reagerer og reagerer domstyper

react and react-dom-typer er de typefiler, vi installerer til TypeScript.

npm installer @ types / react @ types / react-dom

En sidebemærkning om skrivning af filer (typer.d.ts): TypeScript-kompilatoren klager, når du installerer en pakke uden dens typefiler. Dette er irriterende, fordi ikke alle npm-pakker har typefiler, så TypeScript klager over modulet, der ikke findes. En nem, om end hacky måde at håndtere dette på er at oprette en tilsidesættelse.d.ts-fil i / react-typescript-boilerplate / typings and typing: erklær modulspakke-uden-typings-fil. På denne måde kan du bruge pakken uden at IDE klager, men du har ikke typer.

Nu hvor vi har alle de nødvendige afhængigheder og pakker, lad os også oprette nogle af de grundlæggende filer: index.tsx og index.html in / src. Hvis du er i ./src, kan du skrive touch index.tsx index.html for at oprette nye filer fra terminalen.

Bemærk: .tsx er bare TypeScript-versionen af ​​en .jsx-fil, hvis du er bekendt med React.

index.html:

Oprettelse af HTML-filen, som normalt vil være vært på en server, og det sted, hvor reaktionskoden vil blive injiceret (root).

Vi tilføjer også nogle grundlæggende stilarter.

Opret indeks.css i ./src/style med følgende kode:

h1 {
    farve: # 292727;
    tekstjustering: center;
}

Opret App.tsx i ./src/components:

Se her for forskellene mellem React.Component og React.PureComponent.

index.tsx:

Dette er temmelig ligetil, hvis du har brugt React før, du grundlæggende opretter en grundlæggende HTML-fil og injicerer react-projektet med ReactDOM.render i rod.

Vi er også nødt til at tilføje alle konfigurationsfiler, der giver os mulighed for at samle filerne, bundle filerne og udvikle med TypeScript:

  • package.json

Sørg for, at du har denne egenskab indstillet i din package.json, den giver dig mulighed for at bruge npm til at bundle, teste, starte, bygge og kontrollere typer. Prøv at bruge npm run-script til at kalde hver enkelt af egenskaberne for scripts (f.eks. Npm run-script bundt).

Følgende filer skal oprettes i den overordnede mappe / react-typescript-boilerplate:

  • .babelrc

.babelrc fortæller babel, hvilke forudindstillinger der skal bruges til transpilering af koden. Du kan se på, hvad hver af disse ting gør, men de gør hver især de samme ting, som transpilerer koden til ES5.

  • webpack.config.js
  • tsconfig.json

Tsconfig-filen giver os mulighed for at konfigurere hvilke regler for TypeScript, vi gerne vil overholde. Se her for mere information om dette.

  • tslint.json

Sidst men ikke mindst definerer filen tslint.json de regler, som vores IDE vil bruge til at give øjeblikkelig feedback på, om vores kode overholder de angivne regler eller ej.

Til sidst skal du køre kommandoen i terminal:

npm start

Et nyt vindue skulle åbnes i din standardbrowser, og det er alt, hvad der er for at opsætte et TypeScript React-projekt fra bunden. Nu hvor du har din egen TypeScript-reaktions-kedelplade, kan du begynde at oprette React-projekter! Hvis du vil, kan du også klone denne reaktionsopsætning fra min Github. Glem ikke at spille star

Hvis du fandt denne artikel nyttig, skal du trykke på knappen . Hvis du har spørgsmål / forespørgsler, eller hvis du har problemer, så fortæl mig det nedenfor. Jeg var glad for at hjælpe.