Wie kann ich einen Yeoman Generator KO (mit Typescript und Schluck) Knoten JS-Projekt in Visual Studio mit Node JS Tools für Visual Studio

Question

Ich habe ein Node JS-Projekt in Visual Studio (2012 Professional und 2013 Community) mit NTVS und Verwenden Sie einen Yeoman Generator, um eine Knockout SPA app (mit der Typoskript-Option im Generator-Setup) zu erstellen.

Jetzt muss ich entscheiden, welche Datei als Startup-Datei beim Debuggen (schlagen F5). Ich nehme an, das wäre ./src/app/require.config.js, weil sonst bekomme ich einen Fehler, der erfordert, ist nicht definiert.

Wenn ich mit dem Debuggen beginne, sieht alles gut aus und ein Konsolenfenster erscheint mit der Meldung "Debugger hört auf Port 5858". Aber wenn ich localhost: 5858 starte, gibt es keinen Server/Webseite.

Ich kann die App in einem Server auf einem anderen Port starten, aber dann werden keine Haltepunkte getroffen, nicht einmal in der Startup-Datei. Also meine Fragen sind: - Was soll ich als Startup-Datei einstellen? - Wie kann ich meine App in Visual Studio mit NTVS debuggen?

---

bearbeiten

Ich habe festgestellt, dass, wenn ich ein neues leeres NTVS Project mit einer server.js Datei erstellt:

var http = require('http'); 
var port = process.env.port || 1337; 
http.createServer(function (req, res) { 
    res.writeHead(200, { 'Content-Type': 'text/plain' }); 
    res.end('Hello World\n'); 
}).listen(port); 

diese Einstellung als Startdatei Ergebnisse in funktionierendes Debugging für diese Datei.

Wie kann ich noch require über die require.config.js laden und starte meine App mit startup.ts?

require.config.js

// require.js looks for the following global when initializing 
var require = { 
    baseUrl: ".", 
    paths: { 
     "bootstrap": "bower_modules/components-bootstrap/js/bootstrap.min", 
     "crossroads": "bower_modules/crossroads/dist/crossroads.min", 
     "hasher": "bower_modules/hasher/dist/js/hasher.min", 
     "jquery": "bower_modules/jquery/dist/jquery", 
     "knockout": "bower_modules/knockout/dist/knockout", 
     "knockout-projections": "bower_modules/knockout-projections/dist/knockout-projections", 
     "signals": "bower_modules/js-signals/dist/signals.min", 
     "text": "bower_modules/requirejs-text/text" 
    }, 
    shim: { 
     "bootstrap": { deps: ["jquery"] } 
    } 
}; 

startup.ts

import $ = require("jquery"); 
import ko = require("knockout"); 
import bootstrap = require("bootstrap"); 
import router = require("./router"); 

// Components can be packaged as AMD modules, such as the following: 
ko.components.register('nav-bar', { require: 'components/nav-bar/nav-bar' }); 
ko.components.register('home-page', { require: 'components/home-page/home' }); 

// ... or for template-only components, you can just point to a .html file directly: 
ko.components.register('about-page', { 
    template: { require: 'text!components/about-page/about.html' } 
}); 

ko.components.register('grid-page', { require: 'components/grid-page/grid-page' }); 

// [Scaffolded component registrations will be inserted here. To retain this feature, don't remove this comment.] 

// Start the application 
ko.applyBindings({ route: router.currentRoute }); 

---

Edit 2

bei einer weiteren Untersuchung kann ich meine App mit einem server.js starten Datei als Startdatei mit

var http = require('http'); 
var app = require('./src/app/startup.js'); 
var port = process.env.port || 1337; 
http.createServer(app).listen(port); 

Dies führt jedoch zu dem Fehler 'define is not defined'.

Answer 1

Ok, nach etwas mehr Recherche denke ich, dass das, was Sie versuchen, falsch ist.

Sie versuchen, jquery in eine Knotenumgebung zu laden. Node ist eine browserlose Ausführungsumgebung. Es gibt kein Fenster. Es gibt kein Dokument. Kommentar von der Spitze der Jquery-Datei:

// For CommonJS and CommonJS-like environments where a proper `window` 
    // is present, execute the factory and get jQuery. 
    // For environments that do not have a `window` with a `document` 
    // (such as Node.js), expose a factory as module.exports. 
    // This accentuates the need for the creation of a real `window`. 
    // e.g. var jQuery = require("jquery")(window); 
    // See ticket #14549 for more info. 

Ich glaube, was Sie stattdessen tun wollen, ist ein HTML von Ihrem Server zu einem Browser zurückzukehren. Dieser HTML-Code sollte jquery, bootstrap und knockout - die JavaScript-Dateien auf der Client-Seite, die am Dokument funktionieren - über Script-Tags referenzieren.

---

Beachten Sie auch: Da die jquery und andere sind in einem Browser ausgeführt wird, können Sie nicht Visual Studio verwenden, um sie zu debuggen (soweit ich das beurteilen kann). Sie sollten stattdessen Browser-Tools verwenden, um ihr Verhalten zu untersuchen.

https://stackoverflow.com/a/21178111/8155

Answer 2

Ich glaube, Sie Server-Entwicklung und Browser-Entwicklung werden Vermischung. Ein Nodejs-Projekt soll als Prozess auf Ihrer Maschine laufen und als Webserver neben vielen anderen Dingen dienen. Die KO-SPA-App, auf die du dich beziehst, soll in einer Browser-Umgebung laufen. Nur der Yeoman-Generator und einige der Tools, die als Teil des Build-Prozesses für die Knockout-Vorlage (zB gulp) eingerichtet wurden, benötigen nodejs, dies ist jedoch nur zur Build-Zeit erforderlich, nicht bei der Ausführung eines eigenen Codes.

Wenn Sie JavaScript in einem Browser debuggen möchten, müssen Sie Ihre Hauptindex.html Datei finden und diese in einem Browser öffnen - einige IDEs haben Funktionen, um eine Seite auf einem eingebauten Server zu öffnen und sie direkt zu debuggen (Webstorm zum Beispiel), andere erfordern möglicherweise, dass Sie die Seite in einem Browser öffnen und einen Javascript-Debugger anhängen. In Visual Studio sollten Sie es wahrscheinlich in Internet Explorer öffnen und einen Haltepunkt in den JS-Code in VS setzen, ich bin mir nicht sicher, ob Sie auch direkt eine Seite von VS öffnen können und ob Sie IE-Einstellungen anpassen müssen (fragen Sie google, es weiß besser als ich)