Ich habe eine erfolgreiche App mit Aurelia ausgeführt, aber ich entwickelte es mit VSCode und dem Skelett, das Aurelia Ihnen gibt. Jetzt, da die CLI verfügbar ist, versuche ich, die Anwendung auf ein VS2015/Asp.net Core-Projekt zu portieren, aber ich habe einige Schwierigkeiten.So importieren Sie Pakete in meiner Aurelia-Anwendung
Im VSCode-Projekt gibt es eine bundles.js-Datei im Build-Ordner, die Gulp verwendet, um es zu kompilieren (von dem, was ich verstehe). In dieser Datei gibt es einen Abschnitt "dist/aurelia" und dort stelle ich alle zusätzlichen Pakete, die ich importieren muss, ein und importiere die css- und js-Dateien. Sieht wie folgt aus:
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-bootstrapper",
"aurelia-fetch-client",
"aurelia-router",
"aurelia-animator-css",
"aurelia-templating-binding",
"aurelia-polyfills",
"aurelia-templating-resources",
"aurelia-templating-router",
"aurelia-loader-default",
"aurelia-history-browser",
"aurelia-logging-console",
"bootstrap",
"bootstrap/css/bootstrap.css!text",
"fetch",
"jquery",
"rstacruz/nprogress",
"moment",
"systemjs/plugin-text/*.js",
"components/jqueryui",
"quilljs",
"rich-text",
"util",
"signalr"
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": false
}
}
Allerdings, wenn ich den Befehl au new --here
verwenden, um ein neues Projekt in VS2015, das erzeugte Projekt sieht ein wenig anders zu erstellen. Ich habe einen aurelia_project-Ordner und darin sieht es so aus, als ob das ganze Aufbauen/Kompilieren geschieht. In diesem Ordner befindet sich eine aurelia.json-Datei und dort muss ich alle Pakete ablegen (ich benutze NPM btw), wurde mir gesagt. Wenn ich versuche, diese Pakete zu importieren, hängt es .js automatisch an den Dateipfad an und lässt CSS komplett aus, sodass es beim Laden der Seite nicht zum Laden meiner CSS-Datei kommt. Hier ist, was die aurelia.json wie folgt aussieht:
"dependencies": [
"aurelia-binding",
"aurelia-bootstrapper",
"aurelia-dependency-injection",
"aurelia-event-aggregator",
"aurelia-framework",
"aurelia-history",
"aurelia-history-browser",
"aurelia-loader",
"aurelia-loader-default",
"aurelia-logging",
"aurelia-logging-console",
"aurelia-metadata",
"aurelia-pal",
"aurelia-pal-browser",
"aurelia-path",
"aurelia-polyfills",
"aurelia-route-recognizer",
"aurelia-router",
"aurelia-task-queue",
"aurelia-templating",
"aurelia-templating-binding",
{
"name": "text",
"path": "../wwwroot\\scripts/text"
},
{
"name": "aurelia-templating-resources",
"path": "../node_modules/aurelia-templating-resources/dist/amd",
"main": "aurelia-templating-resources"
},
{
"name": "aurelia-templating-router",
"path": "../node_modules/aurelia-templating-router/dist/amd",
"main": "aurelia-templating-router"
},
{
"name": "aurelia-testing",
"path": "../node_modules/aurelia-testing/dist/amd",
"main": "aurelia-testing",
"env": "dev"
},
{
"name": "jquery",
"path": "../node_modules/jquery/dist/jquery.min"
},
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist/js/",
"main": "bootstrap"
}
]
}
Also, ich meine VSCode Projekt bin, importierte ich Bootstrap CSS auf der HTML-Seite über einen Tag benötigen. Ist das immer noch der richtige Weg, Dinge zu tun? Wenn ja, wie behebe ich dieses Importproblem?
EDIT
Die Antwort half unten weiter etwas zu bekommen. Jetzt wird das Projekt erstellt und läuft ohne Fehler, aber ich kann nicht scheinen, dass der Bootstrap CSS korrekt importiert wird.
Hier ist ein Ausschnitt aus meiner neuen aurelia.json Datei:
{
"name": "aurelia-testing",
"path": "../node_modules/aurelia-testing/dist/amd",
"main": "aurelia-testing",
"env": "dev"
},
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist/js",
"main": "bootstrap",
"resources": [
"../css/*.css"
]
}
Das ist also die CSS-Datei in das Bootstrap-Paket hinzufügen. Jetzt rufe ich in meiner Typoskript-Datei import 'jquery'
und import 'bootstrap'
an und ich bekomme immer noch keine CSS. Ich bin mir nicht sicher, wie ich das beheben kann.
Das hilft. Jetzt habe ich es geschafft, die js und css in der aurelia.json Datei zu kompilieren und es lädt die Seite ohne Fehler. Jedoch habe ich immer noch Probleme, die CSS zu verlangen. Ich füge die Bootstrap-Abhängigkeit mit dem Pfad von "../node_modules/bootstrap/dist/js" und den Ressourcen von "../css/*.css" hinzu. In meinem View-Modell habe ich 'Import jquery' und 'Import Bootstrap' und das scheint nicht das CSS zu importieren. Der 'Import-Bootstrap' sollte sowohl CSS- als auch JS-Dateien importieren, richtig? – James
Nein nein nein. Ich habe gesagt, dass SystemJS einige Abhängigkeiten erkennen und automatisch laden kann (abhängig von der Modulkonfiguration). Wenn Sie CLI (RequireJS in Ihrem Fall) verwenden, müssen Sie alle CSS-Dateien importieren –
Ich glaube, dass ich das getan habe. Überprüfen Sie die bearbeitete Frage. Ich habe ein paar Snippets der überarbeiteten aurelia.json-Datei gepostet. – James