Sådan konfigureres et TypeScript-projekt

En grundig guide til begyndere, der laver webapps med React

Foto af Artem Sapegin på Unsplash

I alle mine år som udvikler har jeg aldrig stødt på en vildmark så overvældende som JavaScript-verdenen. Det er en verden af ​​forvirrende kompleksitet, hvor det at se et meget simpelt projekt tilsyneladende kræver installation af adskillige værktøjer, redigering af flere tekstfiler, der forbinder alle disse værktøjer sammen og kører en masse terminalkommandoer.

Der er nogle værktøjer, der prøver at skjule kompleksiteten for dig med forskellige grader af succes. Men så længe disse værktøjer ikke har universel vedtagelse, ser de mig bare ud som endnu flere ting, du skal lære oven på alt andet.

For mig er den største kilde til irritation, at de fleste tutorials antager, at du allerede er bekendt med økosystemet, så de ikke gider at forklare det grundlæggende. For at gøre dette værre, prøver mange tutorials at skubbe en masse ekstra værktøjer til dig - som Webpack, Bower, NVM og Redux - med lidt forklaring.

Det er ironisk, fordi selve JavaScript allerede er installeret på stort set alle computere i verden, inklusive telefoner. Hvorfor skal det at skrive en app på den "professionelle" måde være så kompliceret sammenlignet med at skrive en HTML-fil med en JavaScript-kode i den?

Hvis du som mig har et medfødt behov for at forstå, hvad der foregår, og:

  • hvis du ikke kan stå blint og kopiere kommandoer til terminaler og tekstfiler
  • hvis du vil sikre dig, at du har brug for et værktøj, før du installerer det
  • hvis du spekulerer på, hvorfor dit npm-baserede projekt er 50 MB før du har skrevet din første kodelinje

så velkommen! Du er kommet til det rigtige sted.

På den anden side, hvis du ville starte programmeringen inden for 5 minutter, kender jeg et trick til det: Spring spring over introduktionen her og begynde at læse om fremgangsmåde A i afsnit 2. Eller hvis du synes, jeg giver dig for meget information, spring bare over de dele, du ikke ønsker at lære om, mens du følger med.

I denne tutorial antager jeg, at du har en vis programmeringserfaring med HTML, CSS og JavaScript, men ingen erfaring med TypeScript, React eller Node.js.

Jeg giver dig et overblik over JavaScript-økosystemet, som jeg forstår det. Jeg vil forklare, hvorfor jeg synes, TypeScript og React (eller Preact) er din bedste mulighed for at lave webapps. Og jeg hjælper dig med at starte et projekt uden unødvendige ekstramateriale.

I afsnit 2 diskuterer vi, hvordan og hvorfor man tilføjer ekstra til dit projekt, hvis du beslutter, at du vil have dem.

Indholdsfortegnelse

Afsnit 1: Oversigt over JavaScript-økosystemet

Afsnit 2: Faktisk opsætning af projektet

  • Almindelige trin
  • Fremgangsmåde A: Den lette måde
  • Andre tilgange
  • Fremgangsmåde B: Vejen for de mest værktøjer
  • Fremgangsmåde C: Webpack Way
  • Resumé

Afsnit 1: Oversigt over JavaScript-økosystemet

I mange programmeringssprog er der en bestemt måde at gøre ting, som alle kender til.

For eksempel, hvis du vil oprette en C # app, installerer du Visual Studio, opretter et Windows Forms-projekt med et par museklik, klikker på den grønne "play" -knap for at køre dit nye program og begynder derefter at skrive kode til det. Pakkeadministratoren (NuGet) er indbygget, og debuggeren Just Works. Selvfølgelig kan det tage et par timer at installere IDE, og WPF er omtrent så sjovt som at slå hovedet mod en mur, men i det mindste at komme i gang er let. (Bortset fra hvis du ikke bruger Windows, er det helt anderledes, men jeg tager af.)

I JavaScript er derimod så mange konkurrerende biblioteker og værktøjer til næsten alle aspekter af udviklingsprocessen. Denne spærring af værktøjer kan blive overvældende, før du skriver din første kodelinje! Når du går til Googling "hvordan man skriver en webapp", synes hvert websted, du besøger, at give forskellige råd.

Tak draw.io for skabelonværktøjet!

Den ene ting de fleste ser ud til at være enige om er at bruge Node Package Manager (NPM) til at downloade JavaScript-biblioteker (både serversiden og kun browser). Men selv her bruger nogle mennesker garn, der er npm-kompatibelt eller muligvis Bower.

NPM er bundet med Node.js, en webserver, du kontrollerer fuldstændigt med JavaScript-kode. NPM er tæt integreret med Node. For eksempel kører npm-startkommandoen som standard node server.js.

Selv hvis du planlagde at bruge en anden webserver (eller ikke bruge nogen webserver og bare dobbeltklikke på en HTML-fil), ser det ud til, at alle antager, at du har Node.js installeret. Så du kan lige så godt gå foran og installere node.js, som giver dig npm som en bivirkning.

Node.js er ikke kun en webserver - det kan også køre kommandolinjeapps skrevet i JavaScript. I den forstand er TypeScript-kompilatoren en Node.js-app!

Ud over NPM har du flere valg:

Hvilken smag af JavaScript vil du have?

Det officielle navn på JavaScript er faktisk ECMAScript, og den mest udbredte version er ECMAScript 6 eller ES6 kort. Gamle browsere, især Internet Explorer, understøtter kun ES5.

ES6 tilføjer masser af nyttige og vigtige nye funktioner såsom moduler, let, const, pilefunktioner (eller lambda-funktioner), klasser og tildeling af ødelæggelse.

ES7 tilføjer et par flere funktioner, især noget, der kaldes async / venter.

Hvis du ikke behøver at støtte gamle browsere, og din kode ikke er meget stor, er det at køre din kode direkte i browseren en attraktiv mulighed, fordi du ikke behøver at "kompilere" din JavaScript, før du åbner den i browseren.

Men der er mange grunde til at bruge et kompileringstrin:

  • Hvis du har brug for at understøtte gamle browsere, vil du have en "transpiler", så du kan bruge nye funktioner i JavaScript i gamle browsere. En transpiler er en compiler, hvis outputkode er et sprog på højt niveau, i dette tilfælde JavaScript. Jeg gætter på, at den mest populære transpiler er Babel, med TypeScript på andenpladsen.
  • Hvis du vil bruge den populære React-ramme (men uden TypeScript), skriver du sandsynligvis "JSX" -kode - fragmenter af XML i JavaScript-kode. JSX understøttes ikke af browsere og kræver derfor en forbehandler (typisk Babel).
  • Hvis du vil "minificere" din kode, så den bruger mindre båndbredde (eller er tilsløret), har du brug for en "minifier" -forbehandler. Populære minifiers inkluderer UglifyJS, JSMin og Closure Compiler.
  • Hvis du vil have typekontrol eller kodeudfyldning af høj kvalitet (også kendt som IntelliSense), vil du bruge TypeScript, et supersæt af JavaScript (hvilket betyder, at hver JavaScript-fil også er en TypeScript-fil… tilsyneladende). TypeScript understøtter både ES7-funktioner og JSX, og dens output er ES5 eller ES6-kode. Når TypeScript og JSX-kode bruges sammen, skal filtypenavnet være .tsx. Nogle mennesker bruger et andet sprog, der ligner konceptet TypeScript, kaldet Flow.
  • Hvis du ikke kan lide JavaScript, kan du prøve et helt andet sprog, der transpileres til JavaScript, såsom Elm, ClojureScript eller Dart.

Heldigvis er det muligt at automatisere kompilering, så din kode rekompileres, hver gang du gemmer en fil.

Denne tutorial bruger TypeScript, et supersæt af JavaScript med et omfattende typen system. Fordelene ved TypeScript er, at:

  1. Du får compiler-fejlmeddelelser, når du laver type-relaterede fejl (i stedet for at opdage fejl indirekte, når dit program ikke fungerer korrekt). I IDE'er som Visual Studio Code er dine fejl understreget i rødt.
  2. Du kan få refactoring-funktioner. I Visual Studio Code skal du f.eks. Trykke på F2 for at omdøbe en funktion eller variabel på tværs af flere filer uden at påvirke andre ting, der har samme navn.
  3. Typer gør det muligt for IDE'er at levere popup-popups med kodefuldførelse, også kendt som IntelliSense, hvilket gør programmeringen meget lettere, fordi du ikke behøver at huske alle navne og forventede argumenter for de funktioner, du kalder:
Visual Studio Code's IntelliSense ™

Tip: Besøg dens legeplads for at lege med TypeScript uden at installere noget.

Klient versus server

Din kan køre kode i en klient (front-end browser), en server (Node.js back-end) eller begge dele. Klienten er ikke under din kontrol. Brugeren bruger muligvis Firefox, Chrome, Safari, Opera, Edge eller i værste fald Internet Explorer.

Husk af sikkerhedsmæssige grunde, at brugeren kan ændre en browsers opførsel ved hjælp af browserudvidelser eller F12-udviklerværktøjer. Du kan ikke engang være sikker på, at din kode kører i en rigtig browser.

Udviklere plejede at stole på jQuery-biblioteket for at få konsekvent opførsel i forskellige browsere, men i disse dage kan du stole på, at forskellige browsere opfører sig på samme måde i de fleste tilfælde (undtagen måske Internet Explorer).

I denne tutorial vil vi køre al den vigtige kode i browseren, men vi opretter også en simpel Node.js-server til at betjene appen til browseren. Mange andre servere er tilgængelige, såsom Apache, IIS eller en statisk server som Jekyll.

Men Node.js er blevet en slags standard, sandsynligvis fordi Node.js og NPM er samlet sammen.

Brugergrænsefladrammer

HTML og CSS alene er gode til almindelige gamle artikler med billeder eller enkle former. Hvis det er alt hvad du laver, er der sandsynligvis ikke noget behov for JavaScript overhovedet. CSS kan endda gøre nogle ting, der engang krævede JavaScript, såsom rullemenuer, sider, der omformaterer sig selv til små / mobile browsere eller udskrivning og animationer.

Hvis du har brug for noget mere komplekst end det, eller hvis dine sider genereres dynamisk fra rådata, vil du sandsynligvis bruge JavaScript med et valgfrit brugergrænsefladebibliotek eller -ramme. Jeg viser dig senere, hvordan du bruger React, der har optjent en position som den mest populære UI-ramme, og dens lille fætter Preact.

De “store” populære alternativer inkluderer Angular 2 og Vue.js, mens de “små” inkluderer D3, Mithril og en gammel klassiker kaldet jQuery.

Hvis din webserver kører JavaScript (Node.js), kan du køre React på serveren for at generere sidens første udseende.

Byg værktøjer

Der er flere værktøjer til at "bygge" og "pakke" din kode - Webpack, Grunt, Browserify, Gulp, Parcel - men alle disse ting er valgfri. Jeg viser dig, hvordan du kan tilgå dig med bare npm og, hvis du vil, Pakke eller Webpack.

CSS-smagsstoffer

I denne artikel bruger vi almindelig CSS. Hvis du alligevel vil have et kompileringstrin, kan du prøve SCSS, et "forbedret" derivat af CSS med ekstra funktioner. Eller du kan bruge SASS, som er konceptuelt identisk med SCSS, men har en mere kortfattet syntaks.

Uanset hvad har du brug for Sass-forbehandler. Og som altid i JavaScript World er der en masse alternativer, især MINDRE.

Enhedstest

De populære enhedsafprøvningsbiblioteker er Mokka, Jasmin og Jest. Se her for mere. NPM har en speciel kommando til testning, npm test (som er forkortelse til npm run test).

Andre biblioteker

Udover Redux inkluderer andre populære JavaScript-biblioteker Lodash, Ramda, Underscore og GraphQL.

ESLint er det mest populære fnugværktøj.

Bootstrap er et populært CSS-bibliotek, men det kræver en JavaScript-del (og det er virkelig SASS, ikke CSS).

Når du ser $ i JavaScript-kode, henviser det typisk til jQuery. Når du ser _ refererer det typisk til enten Lodash eller Underscore.

Og måske er det værd at nævne populære templeringsbiblioteker: Jade, Pug, mustasch og styr.

Ikke-webapps

Jeg vil ikke sige noget mere om dette, men TypeScript og JavaScript kan bruges uden for nettet.

Med Electron kan du skrive desktop-apps på tværs af platforme. Med React Native kan du skrive JavaScript-apps til Android / iOS-enheder, der har en "indbygget" brugergrænseflade. Du kan også skrive kommandolinjeapps med Node.js.

Modultyper

I den længste tid kørte al JavaScript-kode i et enkelt globalt navneområde. Dette forårsagede konflikter mellem ikke-relaterede kodebiblioteker, så forskellige slags "moduldefinitioner" blev opfundet for at simulere, hvad andre sprog kalder pakker eller moduler.

Node.js bruger CommonJS-moduler, som involverer en magisk funktion kaldet kræve ('modul-navn') til at importere moduler og en magisk variabel kaldet module.exports for at oprette moduler. For at skrive moduler, der fungerer i både browsere og Node.js, kan man bruge Universal Module Definition (UMD-moduler). Moduler, der kan indlæses asynkront, bruger AMD.

ES6 introducerede et modulsystem, der involverer import og eksport af nøgleord, men Node.js og nogle browsere understøtter stadig ikke det. Her er en primer til de forskellige modultyper.

Polyfills & prototyper

Som en erfaren udvikler kan jeg kun tænke på to ord (bortset fra navnene på biblioteker og værktøjer), der kun bruges i JavaScript Land: polyfill og prototype.

Polyfills er bagudkompatibilitetshjælpere. De er kodestykker skrevet i JavaScript, der giver dig mulighed for at bruge nye funktioner i gamle browsere. Eksempelvis tester udtrykket "mad" .startsWith ('F'), om streng 'mad' starter med F (for rekorden er det falske - det starter med f, ikke F.) Men startsWith er en ny funktion i JavaScript der er ikke tilgængelig i ældre browsere.

Du kan “polyfylde det” med denne kode:

String.prototype.startsWith = String.prototype.startsWith ||
  funktion (søgning, pos) {
    returner søgning ===
      this.substr (! pos || pos <0? 0: + pos, search.length);
  };

Denne kode har formen X = X || funktion (...) {...}, hvilket betyder "hvis X er defineret, skal du indstille X til sig selv (ikke ændre den), ellers indstille X til at være denne funktion." Funktionen, der vises her, fungerer som den starter med skulle.

Denne kode henviser til en af ​​de andre unikke ting ved JavaScript, ideen om prototyper. Prototyper svarer stort set til klasser på andre sprog, så hvad denne kode gør er faktisk at ændre definitionen af ​​den indbyggede streng-datatype. Bagefter når du skriver 'string'.startsWith () kalder det denne polyfill (hvis String.prototype.startsWith ikke allerede var defineret). Der er forskellige artikler derude for at lære dig om prototyper og prototype arv, som denne.

Selv nogle avancerede browserfunktioner har polyfylder. Har du hørt om WebAssemble, som giver dig mulighed for at køre C og C ++ kode i en browser? Der er en JavaScript-polyfil til det!

Kredit

Jeg vil gerne takke Javascript-undersøgelsen og JavaScript-rammerne for meget af ovenstående oplysninger! For et par ting brugte jeg npm-stat til at måle popularitet. Se også denne anden nye undersøgelse.

Afsnit 2: Faktisk opsætning af projektet

Hej med dig! Stadig vågen? Nu går vi på en rundvisning i JavaScript-værktøjets økosystem. Denne del handler ikke om React (vi kommer til det senere), men den indeholder en simpel React-komponent.

Dette er noget af en storslået turné, så vi vil tale om at skrive din app på tre forskellige måder (med et resumé bagefter):

  • A. Den nemmeste måde (med pakke)
  • B. Vejen for de mest værktøjer (eller gør-det-selv-måde)
  • C. Webpack måde

De første seks trin er de samme i alle tre tilgange, så lad os komme i gang!

Trin 1: Installer Node.js / npm

Hvis du endnu ikke har det, skal du gå til at installere Node.js, som også installerer kommandolinjepakkehåndteringen, npm.

Hvis du vil distribuere din app på en anden webserver, anbefaler jeg at bekymre dig om, hvordan du gør det senere.

Trin 2: Installer Visual Studio-kode eller anden editor

En af de vigtigste grunde til at bruge TypeScript i stedet for JavaScript er, at det understøtter kodekonfliktionsfunktioner.

For at få glæde af denne fordel skal du redigere dine TypeScript .ts-filer i en kompatibel editor, såsom Visual Studio-kode - som er gratis og multi-platform. Det er også den mest populære teksteditor for JavaScript-apps. Alternativer inkluderer Atom og sublim tekst.

Visual Studio Code (VS Code) er mappeorienteret: du åbner en mappe i VS Code, og den mappe vil blive behandlet som det aktuelle "projekt". Under installationen (alligevel på Windows) vil det tilbyde et afkrydsningsfelt for at tilføje en handling ”Åben med kode” til mapper (mapper). Jeg anbefaler at bruge denne indstilling som en nem måde at starte VS-kode fra en hvilken som helst mappe:

Opret en tom mappe til din app, og åbn derefter den mappe i VS-kode. Bemærk, at VS-kode har en indbygget terminal, så du ikke har brug for et separat terminalvindue.

Trin 3: Konfigurer package.json

Pakken.json-filen repræsenterer dit projektkonfiguration. Dette inkluderer dets navn, build-kommandoer, listen over npm-moduler, der bruges af dit projekt, og mere.

Hvis du ikke har gjort det endnu, skal du oprette en tom mappe til din app og åbne et terminalvindue i den mappe.

Kør npm init i terminalen.

npm init vil stille dig nogle spørgsmål for at fremstille package.json. Lad et felt være tomt for at acceptere standardforslaget.

Jeg ønskede at lave en lille pædagogisk app til at tegne nogle grafer, der demonstrerer, hvordan klimavidenskaben forklarer det 20. århundredes temperaturrekord.

Så jeg kaldte min app klima-app:

C: \ Dev \ klima-app> npm init
Dette værktøj fører dig gennem oprettelse af en package.json-fil.
Det dækker kun de mest almindelige emner og forsøger at gætte fornuftige standarder.
[....]
pakkenavn: (klima-app)
version: (1.0.0)
beskrivelse: Demo til visualisering af klimadata
indgangspunkt: (index.js)
testkommando:
git repository:
nøgleord:
forfatter: David Piepgrass
licens: (ISC) MIT
Ved at skrive til C: \ Dev \ klima-app \ package.json:
{
  "name": "klima-app",
  "version": "1.0.0",
  "beskrivelse": "Demo til visualisering af klimadata",
  "main": "index.js",
  "scripts": {
    "test": "echo \" Fejl: ingen test specificeret \ "&& exit 1"
  },
  "forfatter": "David Piepgrass",
  "licens": "MIT"
}
Er dette ok? (Ja)

Bemærk henvisningen til index.js. Mærkeligt nok behøver denne fil ikke at eksistere, og vi bruger ikke den. Den bruges kun, hvis du deler din kode via npm.

Trin 4: Installer Typescript

VS-kode har angiveligt TypeScript “sprogunderstøttelse” snarere end en TypeScript-compiler, så nu er vi nødt til at installere compileren.

Der er to måder at installere TypeScript med npm. Brug enten

npm installere - global typeskrift

eller

npm-installation - Gem-dev-typeskript

Hvis du bruger indstillingen - global, er TypeScript-compiler tsc tilgængelig i alle projekter på samme maskine. Det vil også være tilgængeligt som en terminalkommando, men det vil ikke blive føjet til din package.json-fil. Derfor, hvis du deler din kode med andre, installeres TypeScript ikke, når en anden person får din kode og kører npm-installation.

Hvis du bruger - save-dev, tilføjes TypeScript til package.json og installeres i dit projekts mappe til node_moduler (nuværende størrelse: 34,2 MB), men det vil ikke være tilgængeligt direkte som en terminalkommando.

Du kan stadig køre den fra terminalen som ./node_modules/.bin/tsc, og du kan stadig bruge tsc inde i npm "scripts" -afsnittet i package.json.

Sjov kendsgerning: TypeScript-kompilatoren er multiplatform, fordi den er skrevet i TypeScript - og kompileret til JavaScript.

Trin 5: Installer React eller Preact

Sådan tilføjes React til dit projekt:

npm installer react react-dom
npm installation - Gem-dev @ typer / react @ typer / react-dom

Bemærk: - gemme-dev markerer ting som "brugt til udvikling", mens - gem (som er standard og derfor valgfrit) betyder "brugt af programmet, når det er implementeret".

@types-pakker leverer typeoplysninger til TypeScript, men de bruges ikke, når din kode kører / implementeres.

Hvis du glemmer - gemme-dev, eller hvis du bruger den på den forkerte pakke, fungerer dit projekt stadig. Forskellen er kun vigtig, hvis du deler dit projekt som en npm-pakke.

Alternativt kan du bruge Preact, som er næsten det samme som React, men mere end 10 gange mindre. Preact har TypeScript-typedefinitioner indbygget, så du behøver kun en enkelt kommando for at installere den:

npm installere preact

Tip: npm i er en genvej til installation af npm, og -D er en forkortelse for - Save-dev.

Bemærk: Må ikke installere preact og @ types / react i det samme projekt, ellers vil tsc blive sindssyg og give dig omkring 150 fejl (se preact-problem # 639). Hvis dette sker, skal du afinstallere React typer med npm uninstall @ types / react @ types / react-dom

Trin 6: Skriv noget React-kode

Opret en fil kaldet app.tsx med dette lille React-program:

Bemærk: For at den integrerede JSX (HTML / XML) skal fungere, skal filtypenavnet være tsx, ikke ts.

Hvis du har problemer med at få din kode til at fungere, kan du prøve denne kode i stedet - det er det enkleste mulige React-program:

import * som ReactDOM fra 'react-dom';
import * som React fra 'react';
ReactDOM.render (React.createElement ("h2", null, "Hej, verden!"),
                document.body);

Vi diskuterer, hvordan koden fungerer senere. Lad os nu fokusere på at få det til at køre.

Hvis du bruger Preact, skal du ændre de to første linjer sådan:

import * som React fra 'preact';
import * som ReactDOM fra 'preact';

Nogle bemærkninger om Preact:

  • Der er et bibliotek, der er kompatible med preact, som giver dig mulighed for at bruge preact med nul ændringer af din React-kode. Brugsanvisninger findes for brugere af Webpack / Browserify / Babel / Brunch, og denne side viser, hvordan man bruger preact-compat med Parcel.
  • Der er rygter om, at du i Preact skal skrive / ** @jsx h * / øverst i filen, som fortæller TypeScript at kalde h () i stedet for standard React.createElement. I dette tilfælde skal du ikke gøre det, ellers får du en fejl i din browser, at h ikke er defineret (React.h er dog defineret). Faktisk definerer Preact createElement som et alias for h, og da vores importmeddelelse tildeler 'preact' til React, findes React.createElement og fungerer fint.

Valgfrit: kørsel af TypeScript-scripts

Denne tutorial er fokuseret på at lave websider, der kører TypeScript-kode. Hvis du gerne vil køre en TypeScript-fil direkte fra kommandoprompten, er den nemmeste måde at bruge ts-node:

npm installation - global ts-node

Efter installation af ts-node skal du køre ts-node X.ts, hvor X.ts er navnet på et script, du vil køre. I scriptet kan du ringe til console.log ("Hej") for at skrive tekst til terminalen (læsning af tekst fra en bruger er mere kompliceret). På Linux-systemer kan du placere en "shebang" øverst i scriptet, hvis du gerne vil kunne køre ./X.ts direkte (uden at nævne ts-node):

#! / usr / bin / env ts-node

Bemærk: Hvis du ikke behøver at køre .ts-filer fra en terminal, behøver du ikke at installere ts-node.

At køre dit projekt, Fremgangsmåde A: The Easy Way

Jeg opdagede Pakke, da jeg mest var færdig med at skrive denne artikel. Helt ærligt, hvis jeg vidste om Pakke fra begyndelsen, kunne jeg måske ikke have generet at skrive om de andre tilgange. Lad mig ikke komme i gang med, hvor let Pakke er! Det fortjener en medalje!

Den er dog meget stor (81,9 MB), så du skal installere den som en global:

npm installering - glat pakkepakning

Sandheden er, at jeg har lyve for dig. Pakke er så let, at du ikke engang har brug for alle seks trin ovenfor! Du har kun virkelig brug for trin 1, 2 og 6 (installer node, installer en editor og skriv noget kode), fordi pakke automatisk udfører trin 3, 4 og 5 for dig.

Så alt, hvad vi skal gøre nu, er at oprette en index.html-fil, der henviser til vores app.tsx-fil, som denne:

Derefter skal du blot åbne en terminal i den samme mappe og køre kommandoen pakkeindeks.html.

Dette kan naturligvis ikke køre direkte i en browser, så Parcel:

  1. Kompilerer automatisk app.tsx
  2. Installerer React eller Preact, hvis det ikke allerede var installeret, fordi det bemærker, at du bruger det
  3. Bundter din app med dens afhængigheder i en enkelt fil kaldet app.dd451710.js (eller et andet sjovt navn)
  4. Opretter et ændret indeks.html, der refererer til den kompilerede og bundne app
  5. Sætter disse nye filer i en mappe kaldet dist.

Og så gør det alt andet for dig:

  1. Den kører din app på en mini-webserver på http://127.0.0.1:1234 - kan ses i en webbrowser på samme maskine
  2. Det ser efter ændringer i din kode (app.tsx og index.html) og rekompileres, når du ændrer dem
  3. Som om det ikke var nok, når dine filer ændres, sender det en kommando til din webbrowser til automatisk at opdatere!
  4. Endnu bedre opdaterer den siden uden at genindlæse den fuldstændigt ved hjælp af sin Hot Module Replacement-funktion

Det kan være udfordrende at oprette en konventionel bygning, der gør alle disse ting. Denne tutorial dækker kun, hvordan man gør # 1 og # 2 i en konventionel build, med kun kodekompilering (ikke HTML).

Hvis du vil lære mere om Parcel-funktioner, skal du se på Pakkedokumentationen.

En begrænsning af pakken er, at den ikke udfører typekontrol (din kode er oversat til JavaScript, men typefejl opdages ikke).

For små projekter er dette ikke et stort problem, fordi Visual Studio Code udfører sin egen typekontrol. Det giver dig røde, krøllede understregninger for at indikere fejl, og alle fejl er anført i ruden “Problemer” (tryk på Ctrl + Skift + M for at vise det). Men hvis du vil, kan du npm installere pakke-plugin-typescript til forbedret TypeScript-support inklusive typekontrol (fungerer ikke i øjeblikket for mig).

Andre tilgange

De andre tilgange er mere kendte og er standardpraksis i JavaScript-samfundet. Vi opretter en mappe med følgende filer inde:

  • app / index.html
  • app / app.tsx
  • package.json
  • tsconfig.json
  • server.js
  • webpack.config.js (valgfrit)

Som et spørgsmål om at kommunikere med andre mennesker, der ser på din kode senere, er det nyttigt at adskille dit programs front-end-kode fra dens build-konfiguration og app-server.

Rootmappen til et projekt har en tendens til at blive rodet med ekstra filer over tid (såsom .gitignore, hvis du bruger git-, README- og LICENSE-filer, appveyor / travis-filer, hvis du bruger kontinuerlig integration.) Derfor bør vi adskille koden til vores frontend i en anden mappe.

Ud over de filer, vi opretter, vil TypeScript kompilere app.tsx til app.js og app.js.map, mens npm opretter en mappe kaldet node_moduler og en fil kaldet package-lock.json. Jeg kan ikke forestille mig, hvorfor det kaldes "lås", men denne side forklarer, hvorfor den findes.

Så start med at oprette en appmappe og læg din app.tsx der.

Kør dit projekt, Approach B: The Way of Fewest Tools

Det ser ud til, at alles JavaScript-projekt bruger et dusin værktøjer plus køkkenvasken. Er det muligt at lave et lille program uden ekstra værktøjer? Det er det bestemt! Sådan gør du.

Trin B1: Opret tsconfig.json

Opret en tekstfil kaldet tsconfig.json i din rodmappe, og læg denne kode i den:

Denne fil markerer mappen som et TypeScript-projekt og muliggør opbygningskommandoer i VSCode med Ctrl + Shift + B (tsc: watch-kommandoen er nyttig - den kompilerer automatisk din kode, hver gang du gemmer den.)

Fjollet faktum: tsc tillader kommentarer i .json-filer, men npm gør det ikke.

Denne fil er meget vigtig, fordi hvis indstillingerne ikke stemmer, kan noget gå galt, og mystiske fejl kan slå dig i ansigtet. Her er dokumentationen til tsconfig.json, men kompilatorindstillingerne dokumenteres separat.)

Trin B2: Tilføj et build-script

For at give npm mulighed for at opbygge din TypeScript-kode, skal du også tilføje poster i scriptsdelen af ​​package.json. Rediger det afsnit, så det ser sådan ud:

"scripts": {
  "test": "ekko \" Fejl: ingen test installeret \ "&& exit 1",
  "build": "tsc",
  "start": "node server.js"
},

Build-scriptet kører ganske enkelt tsc, som kompilerer din kode i henhold til indstillingerne i tsconfig.json. For at påkalde dette script skriver du npm run build på kommandolinjen.

”Men vent!” Tænker du måske. ”Det er virkelig meget nemmere at skrive tsc end npm run build!” Det er sandt, men der er to grunde til at definere et build-script:

  1. Hvis du installerede TypeScript med --save-dev men ikke - global, kan du ikke køre tsc direkte fra kommandolinjen, fordi det ikke er i PATH.
  2. Der er en god chance for, at din build-proces bliver mere kompliceret senere. Ved at oprette et build-script kan du let tilføje andre kommandoer til build-processen senere.

Bemærk: npm kører prestart-scriptet automatisk, når nogen kører start-scriptet, så du kan tilføje dette yderligere et ekstra script:

"prestart": "npm run build",

Dette bygger dit projekt, hver gang du starter din server med npm start eller npm run start.

Men dette har to ulemper:

  1. tsc er lidt langsom
  2. Hvis tsc finder typefejl, starter din server ikke

Når TypeScript registrerer typefejl, forhindrer det ikke i at skrive JavaScript-outputfiler, og du kan synes, det er lejlighedsvis nyttigt at køre din kode, selv med typefejl.

Standardadfærden ved npm start er at køre node server.js, så det ser overflødigt ud til at inkludere "start": "node server.js". Hvis din server imidlertid er skrevet i TypeScript, har du brug for denne linje, fordi server.js ikke findes, før server.ts er samlet. Og hvis server.js ikke findes, giver npm start den fejl, der mangler script: start, medmindre du inkluderer denne linje.

Trin B3: Lav en enkel server

For at sikre, at Node.js fungerer, skal du oprette en tekstfil kaldet server.js og lægge denne kode i den:

const http = kræve ('http');
http.createServer (funktion (anmodning, svar) {
  // Send HTTP-overskrifter og organ med status 200 (betyder succes)
  response.writeHead (200, {'Content-Type': 'text / html'});
  response.end ( `
     
      

Hej, verden!

      Du bad om: $ {request.url}      `); .}) Lytte (1234);

Kør npm start for at starte det, besøg http://127.0.0.1:1234/index.html for at sikre dig, at det fungerer, og tryk derefter på Ctrl + C for at stoppe serveren.

For at få IntelliSense for Node.js skal du installere typeoplysninger for det med denne kommando:

npm installere @ typer / node - gemme-dev

Skriv derefter http i VS-kode. for at sikre, at det fungerer:

Bag kulisserne bruger VS Code TypeScript-motoren til dette. Hvis du dog omdøber din fil til server.ts, fungerer IntelliSense ikke! Er TypeScript ødelagt i Node.js? Ikke rigtig. TypeScript kan stadig kompilere det, det kræver bare ikke grok i en .ts-sammenhæng. Så i TypeScript-filer skal du bruge import i stedet for at kræve:

import * som http fra 'http';

Bemærk: Dette er forvirrende forskellig fra Nodes .mjs-filer, som kræver import-http fra 'http'; (Detaljer)

TypeScript konverterer derefter import til krævet i dens output (på grund af indstillingen "modul": "umd" i tsconfig.json).

Lad os nu ændre vores server, så den kan tjene enhver fil fra vores / app-mappe:

Du vil bemærke, at denne kode har nogle sjove ... indlejring. Det skyldes, at Node.js-funktioner normalt er asynkrone. Når du ringer til funktioner i fs, i stedet for at returnere et resultat, sætter de pause i dit program, indtil de er færdige, og derefter kalder de en funktion leveret af dig, og sender den funktion enten en fejl (err) eller nogle oplysninger (fileInfo).

I stedet for at returnere oplysninger om en fil for eksempel, sender fs.stat oplysninger til et tilbagekald.

En fiskende ting ved denne webserver er, at den ignorerer request.method og behandler enhver anmodning som om det var en GET. Men det fungerer godt nok til at komme i gang.

Trin B4 (valgfrit): Brug Express

Hvis du ønsker, at din serverside skal udføre en "routing", der er mere kompliceret end at servere et par filer, skal du sandsynligvis lære om den mest populære Node.js-serverramme: Express.

Hvis vi bruger Express, vil vores serverkode være meget kortere.

Bare installer det med npm install express og læg følgende kode i server.js:

const express = kræver ('express');
const app = express ();
app.use ('/ node_modules', express.static ('node_modules'));
app.use ('/', express.static ('app'));
app.listen (1234, () => console.log (
    'Ekspressserver kører på http://127.0.0.1:1234'));

Trin B5: Lav en webside, der skal indeholde din app

Til sidst oprettes en index.html-fil i din appmappe for at indlæse din app:

Denne side inkluderer både React (react.development.js og react-dom.development.js) og Preact (preact.dev.js), så jeg behøver ikke at give dig separate instruktioner for hver enkelt. Du kan fjerne den, du ikke bruger, men siden kan stadig indlæses med uløste scriptelementer.

På dette tidspunkt skal du være i stand til at opbygge din kode (npm run build), starte din server (npm start) og besøge http://127.0.0.1:1234 for at se din app!

Husk, at du automatisk kan kompilere din kode igen i VS-kode: tryk på Ctrl + Shift + B og vælg tsc: watch.

Bemærk: Det er vigtigt at indlæse app.js i slutningen af ​​kroppen, eller React siger Fejl: Målbeholder er ikke et DOM-element, fordi app.js kalder document.getElementById ('app'), før appelementet findes.

På dette tidspunkt er det værd at bemærke, at denne kode er lidt hacky. Især denne del:

Hvad gør denne kode mindre end ideel?

  1. Vi har allerede importangivelser i vores app.tsx-fil, så det er uheldigt, at vi har brug for en separat kommando til at indlæse modulerne i vores index.html.
  2. Vi henviser specifikt til udviklingsversioner af koden, der inkluderer kommentarer og er meget mere læsbare end minificerede versioner. Men hvis vi ruller vores websted ud til et stort publikum, ønsker vi at skifte til de minificerede versioner, så sider indlæses hurtigere. Det ville være rart, hvis vi kunne gøre det uden at miste debugging fordelene ved udviklingsversionerne.
  3. Det antages, at vi kan få adgang til filer i node_moduler, hvilket er en usædvanlig måde at opsætte en server på.

Alle de ulemper, der er beskrevet her, fører til, at vi ønsker et slags yderligere værktøj, der hjælper os med at distribuere kode til vores webbrowser. Vi diskuterede allerede Pakke, men den mest populære er Webpack.

Køre dit projekt, Approach C: Webpack Way

Den mest populære ting at gøre med front-end apps er at “pakke” alle moduler (React + din kode + alt andet, du har brug for) i en enkelt fil. Dette kan sammenlignes med det, de kalder "linking" på nogle andre sprog, f.eks. C ++. Det er dybest set, hvad Pakke og Webpack er bygget til at gøre (Gulp er ikke - det kræver ekstra værktøjer installeret separat).

Trin C1 & C2: Opret tsconfig.json og server.js

Hvis du sprang over tilgang B, skal du gøre trin B1 og B4 nu.

Trin C3: Installer webpack

Du kan installere det sådan:

npm installation - gem-dev webpack webpack-cli

Desværre er Webpack overdimensioneret: disse to pakker har 735 afhængigheder, der vejer ind til 50,9 MB (13.198 filer i 1868 mapper). Og af en eller anden grund kræver webpack-cli Webpack-pakken, men markerer den ikke som en afhængighed, og derfor skal du installere dem begge eksplicit.

Og selvom webpack-cli tilsyneladende "bare" er kommandolinjegrænsefladen til Webpacks API'er, er den uforholdsmæssigt stor af en eller anden grund (Webpack alene er kun 13,6 MB).

På grund af dens størrelse er det sandsynligvis mere fornuftigt at installere det som et globalt:

npm installation - global webpack webpack-cli

Når du bruger - global, skal du huske, at hvis du deler din kode med en anden, får den anden person ikke Webpack automatisk, når de skriver npm installation, så du vil forklare, hvordan du installerer i din README-fil.

Hvis du skifter mening og vil skifte fra - gemme-dev til - global, skal du bare køre --global installationskommandoen og derefter bruge npm afinstallere webpack webpack-cli til at slette den lokale kopi.

Trin C4: Tilføj build-scripts

For at give npm mulighed for at bygge og betjene dit projekt skal du tilføje poster i afsnittet "scripts" i package.json.

Du kan ændre dette afsnit, så det ser sådan ud:

"scripts": {
  "test": "ekko \" Fejl: ingen test installeret \ "&& exit 1",
  "build": "tsc && webpack app / app.js -o app / app.bundle.js --mode = produktion",
  "build: dev": "tsc && webpack app / app.js -o app / app.bundle.js --mode = udvikling",
  "start": "node server.js"
},

Med disse scripts vil du bruge enten npm run build til at opbygge en minificeret produktionsversion eller npm run build: dev til at opbygge en udviklingsversion med fulde symboler og kommentarer. Dette er imidlertid ubelejligt, fordi når du ændrer din kode, skal du manuelt gentage kommandoen npm run build: dev.

I fremgangsmåde B kunne vi bruge tsc: se i VS-kode, men det fungerer ikke denne gang, fordi vi også er nødt til at køre Webpack - og det ved ikke tsc.

Kan vi konfigurere den til automatisk genopbygning, når vores kode ændres? Ja, men vi har brug for et Webpack-plugin for at opnå dette. Et af de plugins, der kan udføre jobbet, kaldes awesome-typescript-loader. Installer det sådan:

npm installere awesome-typescript-loader - gemme-dev

I package.json skal du derefter ændre dit "scripts" -snit for at se sådan ud:

Dette gør webpack fuldt ansvarlig for opbygning af vores TypeScript-kode, og derfor kan vi bruge dens - urmulighed til at se efter kodeændringer. Kommandoen til at opbygge og se på for kodeændringer er npm run watch.

Trin C5: Start server og Webpack

Du har brug for to separate terminaler, en til dit build-system (npm run watch) og en til din server (npm start). Hvis din server er skrevet i TypeScript, skal du først køre npm run watch, ellers betyder det ikke noget, hvilken du starter først.

Det er værd at bemærke, at VS-kode kan holde styr på flere terminaler. Du kan oprette to terminaler og køre en kommando i hver sådan:

Trin C6: Opret index.html og indlæs det

I Approach C er din index.html-fil meget enklere end i Approach B:




   App </ title>
  <meta charset = "utf-8" />
</ Head>
<Body>
  <h1> Mini React-app ❤ </h1>
  <div id = "app"> </div>
  
</ Body>
</ Html></pre><p>Besøg http://127.0.0.1:1234, og siden skal indlæses. Du er færdig!</p><h4>Trin C7: Opret en webpack.config.js-fil (valgfrit)</h4><p>Vores build-kommando bliver ret lang og ligner meget for vores tre tilstande. Vi har også kun konfigureret tsx-filtypenavnet, så webpack ikke ved, hvordan man sammenstiller ts-filer endnu.</p><p>Den mest populære måde at bruge Webpack på er med en speciel konfigurationsfil adskilt fra package.json. "Build" -scriptet ovenfor bliver følgende webpack.config.js-fil:</p><pre>module.exports = {
  post: __dirname + '/ app / app.tsx',
  output: {
    sti: __dirname + '/ app',
    filnavn: 'app.bundle.js'
  },
  modul: {
    regler: [
      {test: /\.(ts|tsx)$/, loader: 'awesome-typescript-loader'}
    ]
  }
};</pre><p>Når du har oprettet denne fil, skal du ændre dine scripts i package.json som følger:</p><p>Som før kan du bygge og se efter ændringer med npm run watch, eller bruge npm run build til en minificeret produktionsopbygning.</p><h3>Du er færdig!</h3><p>Det er det! Klik her for en oversigt over alle trinene ovenfor og her for at fortsætte med at lære om TypeScript. Nogen spørgsmål?</p></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">Se også</h4><a href="/item/how-to-survive-a-flight-if-you-hate-flying-9f4fd7/" title="Sådan overlever du en flyvning, hvis du hader at flyve">Sådan overlever du en flyvning, hvis du hader at flyve</a><a href="/item/how-to-keep-your-great-ideas-from-dying-5db41e/" title="Sådan holder du dine gode ideer i at dø">Sådan holder du dine gode ideer i at dø</a><a href="/item/how-to-build-nodejs-application-for-your-hyperledger-composer-networks-36a7e8/" title="Sådan bygger du NodeJS-applikation til dit Hyperledger Composer-netværk">Sådan bygger du NodeJS-applikation til dit Hyperledger Composer-netværk</a><a href="/item/how-to-get-rid-of-laziness-and-carelessness-feb89d/" title="Hvordan slipper man af med dovenskab og skødesløshed?">Hvordan slipper man af med dovenskab og skødesløshed?</a><a href="/item/how-to-even-appear-productive-at-work-def3f8/" title="Sådan jævn ... Vis produktiv på arbejdspladsen">Sådan jævn ... Vis produktiv på arbejdspladsen</a><a href="/item/how-to-publish-your-app-on-apple-s-app-store-in-2018-183046/" title="Sådan offentliggør du din app i Apples App Store i 2018">Sådan offentliggør du din app i Apples App Store i 2018</a><a href="/item/cryptocurrencies-how-to-separate-the-good-from-the-bad-fbce59/" title="Cryptocururrency: Hvordan man adskiller det gode fra det dårlige">Cryptocururrency: Hvordan man adskiller det gode fra det dårlige</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="vn flag"></i></a><a href="https://uk.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="ua flag"></i></a><a href="https://tr.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="tr flag"></i></a><a href="https://th.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="th flag"></i></a><a href="https://sv.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="ch flag"></i></a><a href="https://sr.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="rs flag"></i></a><a href="https://sl.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="si flag"></i></a><a href="https://sk.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="sk flag"></i></a><a href="https://ru.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="ru flag"></i></a><a href="https://ro.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="ro flag"></i></a><a href="https://pt.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="pt flag"></i></a><a href="https://pl.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="pl flag"></i></a><a href="https://ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="de flag"></i></a><a href="https://ar.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="sa flag"></i></a><a href="https://bg.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="bg flag"></i></a><a href="https://cs.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="cz flag"></i></a><a href="https://el.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="gr flag"></i></a><a href="https://es.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="es flag"></i></a><a href="https://et.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="ee flag"></i></a><a href="https://fi.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="fi flag"></i></a><a href="https://fr.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="fr flag"></i></a><a href="https://hi.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="in flag"></i></a><a href="https://hr.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="hr flag"></i></a><a href="https://hu.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="hu flag"></i></a><a href="https://id.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="id flag"></i></a><a href="https://it.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="it flag"></i></a><a href="https://ja.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="jp flag"></i></a><a href="https://ko.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="kr flag"></i></a><a href="https://lt.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="lt flag"></i></a><a href="https://lv.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="lv flag"></i></a><a href="https://ms.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="my flag"></i></a><a href="https://nl.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="nl flag"></i></a><a href="https://no.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="no flag"></i></a><a href="https://uz.ramonas-way.org/item/how-to-set-up-a-typescript-project-99d906/"><i class="uz flag"></i></a></div>ramonas-way.org<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>