node.js - Klientsides Javascript i Typescript Express-projekt

Jag har alltid undrat hur jag på rätt sätt kunde lägga till klient-side JavaScript till mitt express-projekt. Jag använder Typescript och jag skulle också vilja dra nytta av Typescript-typningar (till exempel för jQuery) när jag skriver min klient-side JavaScript.

Min projektstruktur ser ut så här:

  • rot

    • dist

    • src

      • hjälpare
      • modeller

      • registrering

        • router.ts
        • formulär.pug

      • profil

        • router.ts
        • profil.pug

    • wwwrot

      • css
      • js
      • bilder

Vad jag har gjort fram till idag:

Jag skapade alla klientsides JavaScript-filer i wwwroot/js (t.ex. jquery.min.js, registration-form.js) och jag laddade dem i huvudet på de lämpliga sidorna.

Nackdelar:

  1. Jag var tvungen att skriva ES5 JavaScript som är kompatibelt med de webbläsare vi vill stödja
  2. Jag kunde inte lägga JavaScript-filerna där de logiskt hör hemma (t.ex. jag skulle hellre lägga min registration-form.js i src/registration/ istället för i wwwroot)
  3. Inget Typescript möjligt :(. Inga typescript-typer, ingen transpilerning till ES5, etc.

I några handledningar jag såg körde de helt enkelt npm install --save jquery och importerade det i sina klient-sidiga filer. Så jag känner att jag måste ha missat något ganska viktigt, men jag kunde inte hitta några handledningar om det.

Min fråga:

Vad är det "rätta sättet/bästa praxis" att skriva klient-sidig JavaScript i Typescript/Express-applikationer (som också bör eliminera de nämnda nackdelarna)?

Svar #1

Att använda TypeScript på klientsidan är inte mycket annorlunda än på serversidan.

Här är vad du kan göra:

  • Skapa mappen client för klient-sidans TypeScript-källor
  • Sätt tsconfig.json i client-mappen och konfigurera den för att producera "es5"-kod (target: es5)
  • Installera jquery-typer (npm install --save-dev @types/jquery)

Det är allt, nu kan du skriva din klientsidokod i TypeScript.

Du kan kompilera server-sidans kod med tsc -p ./src (med server-sidans tsconfig.json under src) och kompilera klient-sidans kod med tsc -p ./client.

Jag gjorde ett enkelt exempel på en sådan app, kolla det här. Jag lade det enkla skriptet för att bygga allt i package.json, så du kan köra npm run-script complie för att få både server- och klientkod kompilerad till /dist-mappen. Sedan kör du det med npm start.

Ytterligare steg:

  • Automatisera ditt flöde: du bör kunna starta din app lokalt och sedan bara redigera källfilernas TypeScript-filer och appen bör laddas om automatiskt. Detta kan göras med webpack/gulp/grunt eller ett anpassat shell-skript som kan triggas när någon av dina källfiler har ändrats och sparats.
  • Om du upptäcker att du skriver en rejäl mängd klientkod, kolla också in Angular (https://angular.io/docs). Det använder TypeScript som föredraget språk för klientutveckling och du kommer att kunna bygga mycket mer kraftfulla klientapplikationer med det. Du kan också välja ett annat bibliotek (React, Vue.js, osv.), se exemplen på TypeScript-sidan.

Relaterade artiklar