2016-08-09 5 views
2

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.

Antwort

6

Was passiert ist, dass aurelia skeleton-esnext SystemJS verwendet und Aurelia-CLI RequireJS (SystemJS und WebPack wird in naher Zukunft auf CLI unterstützt werden). SystemJS und RequireJS sind Modullader, und sie verhalten sich ein wenig anders. Aus diesem Grund haben Sie zwei verschiedene Möglichkeiten, die Module zu konfigurieren.

Dieser Link zeigt, wie ein lib konfigurieren, die eine CSS-Datei hat: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/9

"dependencies": [ 
    ... 
    { 
    "name": "nprogress", 
    "path": "../node_modules/nprogress", 
    "main": "nprogress", 
    "resources": [ 
     "nprogress.css" 
    ] 
    } 
    ... 
] 

Der obige Code RequireJS sagt nprogress.css in der mitgelieferten Datei zu setzen. Es wird jedoch nicht angegeben, wo oder wann die css-Datei importiert/benötigt wird. Sie müssen sie also in Ihrer App importieren/benötigen. Verwenden Sie entweder <require from="nprogress/nprogress.css"></require> oder verwenden Sie import 'nprogress/nprogress.css'; in Ihrem Ansichtsmodell.

Wenn Sie SystemJS verwendet haben, mussten Sie einige CSS-Dateien nicht importieren, da JSPM einige Abhängigkeiten erkennen und eine spezielle Syntax generieren kann, die SystemJS anweist, CSS-Dateien zu laden. Zum Beispiel, wenn Sie nprogress mit JSPM installieren, generiert es die folgende Datei:

/* */ 
"format global"; 
"deps ./nprogress.css!"; 
/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress 
* @license MIT */ 

;(function(root, factory) { 
///.... 

Die Zeile „deps ./nprogress.css!„, Sagt SystemJS automatisch zu importieren/nprogress.css benötigen, wenn Sie das Modul laden Deshalb müssen Sie die CSS-Datei in Ihrer Ansicht oder Ansicht-Modell nicht importieren/erfordern

hoffe, das hilft

+0

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

+0

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 –

+0

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

4

..! Schauen sie sich die contact-manager tutorial von Rob Eisenberg

es zeigt, wie JQuery, Bootstrap hinzuzufügen zu aurelia.json:

"dependencies": [ 
... 
"jquery", 
{ 
"name": "bootstrap", 
"path": "../node_modules/bootstrap/dist", 
"main": "js/bootstrap.min", 
"deps": ["jquery"], 
"exports": "$", 
"resources": [ 
    "css/bootstrap.css" 
] 
}, 
... 
] 

Und wie es erforderlich ist in app.html:

konnte ich erfolgreich das gleiche für D3 tun:

{ 
"name": "d3", 
"path": "../node_modules/d3/build", 
"main": "d3.js" 
}, 

Dann ist es in Ich konnte Datei js meine Komponenten verwenden

import * as d3 from d3 

[Bearbeiten] Gerade bemerkt Tutorial Der Link wurde in die oben akzeptierte Antwort eingefügt, behielt diese jedoch bei, da er den tatsächlichen Code zum Hinzufügen von jquery/bootstrap zeigt, der einige Elemente in den OP-Beispielen enthält, einschließlich nach der Bearbeitung.

+0

Reproduziert alle Schritte. Die Fehlermeldung "Bootstrap's JavaScript benötigt jQuery" ist immer noch da. Ich bin in einem neuen Projekt von der CLI erstellt. – alearg

+0

@alearg Können Sie Ihr Projekt in ein öffentliches Repo veröffentlichen oder wo hochladen? Wäre einfacher zu debuggen/geben Sie Feedback auf diese Weise. Eine ausführlichere Beschreibung zum Hinzufügen von Bibliotheken zu Ihrem Projekt finden Sie auch auf der [auerlia-cli README.md] (https://github.com/aurelia/cli) – mauricio777

+0

Vielen Dank für Ihre Zeit. Schau mal hier nach dem Grund meines Problems – alearg