Einrichten einer Umgebung für ein Front-End-Projekt

Question

Ich arbeite an einem reinen Front-End-Projekt mit VS-Code. Ich habe einen Ordner für Typoskript und einen für Sass. Ich kompiliere diese mit Gulp in separaten Ordnern für js und css.

Ich sah ein Problem, wenn ich versuchte, var something = require('some-node-module'); zu verwenden und einen Fehler sowohl in Typoskript und Browser-Konsole erhalten. Ich habe @ types dafür hinzugefügt, aber es hat nicht funktioniert, da ich immer noch einen Fehler in der Browser-Konsole habe. Ich suchte mehr und fand this Frage, ich verstand was das Problem ist und ich benutzte Browserify von dort. Jetzt wird das Typoskript ohne Fehler kompiliert und ich muss jedes Mal ein Bündel machen, wenn ich etwas ändere. Gibt es etwas, was ich tun kann, um Browserify loszuwerden und trotzdem in der Lage sein, require() in Typoskript zu verwenden. Da dies mein erstes reines Frontend-Projekt ist, möchte ich es einfach und sauber halten und nicht viele Plugins/Module verwenden, damit es funktioniert.

Mein tsconfig.json:

{ 
"files": [ 
    "ts/main.ts"  
], 
"compilerOptions": { 
    "noImplicitAny": true, 
    "target": "es5", 
    "outDir": "js" 
} 
} 

Gibt es eine Möglichkeit, Typen, ohne die Notwendigkeit verwenden können mehrere Knotenmodule zu installieren, damit es funktioniert?

Answer 1

Wenn Sie require() oder import verwenden, verwenden Sie Module. Wenn Sie Module verwenden, benötigen Sie einen Modul-Bundler wie zB browserify oder webpack.

Aber Sie müssen nicht Module in einem Typoskript-Projekt verwenden. Der Typescript-Compiler verkettet automatisch alle separaten .ts-Dateien in ein .js-Paket. Sie müssen die Ausgabedatei in tsconfig.json einzustellen:

{ 
    "compilerOptions": { 
     "sourceMap": true, 
     "removeComments": true, 
     "target":"es5", 
     "out": "dist/js/main.js" 
    } 
} 

Eine separate .ts-Datei könnte wie folgt aussehen: Ihre Test-Klasse

class Test { 
    constructor(){ 
     console.log("hi!"); 
    } 
} 

Der Unterschied zu Modulen ist, dass in platziert wird die globale Reichweite, aber man kann das verhindern, indem ein Namespace, wo Sie Ihre Klassen alle setzen:

namespace Game { 
    export class Test { 
     constructor(){ 
      console.log("hi!"); 
     } 
    } 
} 

Jetzt gibt es nur ein Objekt namens ‚Game‘ im globalen Bereich und Sie nicht n eed einen Modul Bundler, um diese einzelne .js Datei zu erstellen.

Answer 2

Jedes Front-End-Projekt benötigt Browserify oder Webpack (empfohlen), die Ihre Module in browserkompatibles Skript bündeln. require() ist nodejs 'Funktion, die andere Module/Skripts importiert, aber es existiert nicht in Browser-Ökosystem.

Read about webpack here.