___ qstnhdr ___ So richten Sie Typescript in Symfony ein?
___ tag123symfony ___ Symfony ist ein Open-Source-PHP-Webentwicklungsframework für PHP 5.5.9+, das sich auf einfache und schnelle Entwicklungszyklen konzentriert und modernste Designmuster und Programmierphilosophien beinhaltet. Symfony sollte nicht mit Symphony CMS verwechselt werden.
Dieses Tag sollte nicht für Fragen zu Symfony 1.x verwendet werden. Bitte verwenden Sie stattdessen das Symfony1-Tag.
___ antwort43392021 ___
In Symfomy oder einem anderen Framework Typoskript als nächstes installieren.
LOKAL
Sie müssen installieren npm:
%Vor%
installieren Typoskript als global:
%Vor%
Jetzt können Sie mit Befehl zu js mit dem Befehl tsc:
kompilieren
%Vor%
Sie können den Ordner public in Ihrem Bandle erstellen *.ts erstellen und ihn mit dem Befehl tsc im Terminal kompilieren. Sie können damit arbeiten .
LOCAL INSTALL WITH gulp
Wenn Sie jedoch eine automatische Kompilierung erstellen, installieren Sie gulp oder grunt :
%Vor%
Erstellen Sie im Projektordner package.json (Konfigurationsdatei für den Manager npm )
und installiere die Gilde gulp-typescript ( Dokumentation )
%Vor%
Erstelle gulpfile.js (tasks file for gulp) im Root-Projektverzeichnis.
und legen Sie Aufgaben fest, die in doc geschrieben sind.
%Vor%
LOCAL installiere angular2
Wenn Sie angular2 in symfony2 verwenden möchten. Sie können Angular CLI als global installieren.
%Vor%
Erstellen Sie einen Ordner in Ihrem Bundle für angular2 (zum Beispiel: src / AppBundle / Resources / angular2). Das wird eckig2 Projekt in symfony sein.
Projekt im Terminal erstellen
%Vor%
und arbeite mit Symfony nach API
ABER WENN SIE AUF SERVER VERTEILEN Konfigurieren Sie die Umleitung zu index.html in ANPACHE ODER NGINX
Wenn Sie create bereitstellen, kompilieren Sie Ihre amgular2 App in dist (ng build) und konfigurieren Sie in Ihrem Webserver den Pfad zu src / AppBundle / Resources / PROJECT_NAME / dist / index.html
Frage:
Wie richte ich Typescript mit Symfony mit den minimalen Konfigurationsänderungen in Symphony-Konfigurationsdateien ein?
Hier sind die Punkte, die diese Lösung lösen sollte:
-
Typescript MVC Pattern in einem privaten Typoskript-Verzeichnis:
src & gt; XBundle & gt; Ressourcen & gt; privat & gt; Typoskript
-
Javascript-Pakete zusammengestellt in:
src & gt; XBundle & gt; Ressourcen & gt; öffentlich & gt; js
-
Das private Verzeichnis sollte aus mehreren Apps für verschiedene Seiten bestehen. (Wenn eine App eine eigene %code% -Datei benötigt, ist das in Ordnung)
-
Eine App ist zum Beispiel einfach home.app.ts , die beispielsweise search.component.ts und importiert chat.component.ts
-
Kompilierte "Apps" sollten sich im public & gt; js Repository, das in Punkt (2) erwähnt wird, und sollte benannt werden (Beispiel aus Punkt (4)) home.bundle.js
-
Im Ordner %code% sollten nur %code% Dateien
vorhanden sein
-
Das Hinzufügen der Bundles zu meinen Zweigdateien und das Aufrufen meiner Ansicht sollten das Bundle sofort ausführen. Ich sollte kein zusätzliches Skript hinzufügen müssen, um " %code% " aufzurufen (das ist der Grund, warum ich %code% / %code% vermeiden möchte)
Was ich nicht suche:
Ich bin nicht Suche nach einer Lösung mit %code% und %code% , aber eine allgemeine Lösung mit dem %code% -Verzeichnis (oder sogar das Resources-Verzeichnis in einem Bundle) im Stammverzeichnis von ein symfony Projekt.
Die meisten Artikel über dieses Thema sprechen über %code% und versuchen, %code% und %code% zu integrieren.
Ich suche kein Installations-Tutorial für npm und tsc.
Ich brauche keine automatische Kompilierung. Ich benutze Phpstorm, also macht es das sowieso automatisch.
___ tag123typescript ___ TypeScript ist eine typisierte Obermenge von JavaScript, die von Microsoft erstellt wurde. Es fügt optionale Typen, Klassen, async / await und viele andere Features hinzu und kompiliert JavaScript. Dieses Tag steht für spezifische Fragen zu TypeScript. Es wird nicht für allgemeine JavaScript-Fragen verwendet.
___ tag123webpack ___ Webpack ist ein JavaScript Modul Bundler.
Webpack verwendet Module mit Abhängigkeiten und generiert statische Elemente, die diese Module repräsentieren. Die wichtigsten Funktionen von Webpack basieren auf Erweiterbarkeit und ermöglichen Entwicklern die Verwendung von Best Practices in Webarchitektur und Webleistung.
___ tag123typescript20 ___ Tag für Fragen zu neuen Features in TypeScript 2.x. Für allgemeine TypeScript-Fragen ist TypeScript das richtige Tag.
___ tag123symfony31 ___ Dies ist das spezifische Tag von Symfony 3.1.x. Verwenden Sie es zusätzlich zum symfony3-Tag, wenn Ihre Frage speziell für Symfony 3.1.x gilt - nicht nur für 3.x.
___ answer43489718 ___
Ich habe das Webpack benutzt, damit das funktioniert. Requisiten auf @zerkms.
Dies ist ein work in progress und könnte besser optimiert werden.
Installation:
- Installieren Sie webpack , ich habe es persönlich weltweit installiert. (Unsicher, wie man Phpstorm für die Verwendung von Webpack konfiguriert, scheint es kein direktes eingebautes System dafür zu geben)
-
Gehe zu %code%
-
%code%
- Installieren Sie die Dev-Abhängigkeiten: %code% und %code%
Randnotiz:
@Morgan Touverey Quilling, empfiehlt die lokale Installation von Webpack, Ihre Wahl :
%code%
Konfiguration:
Hier ist meine Ordnerstruktur:
%Vor%
webpack.config.js
Diese Konfiguration könnte wahrscheinlich viel weiter vereinfacht werden.
Für jedes Paket sollte eine neue Konfiguration erstellt werden, die auf die Hauptdatei verweist. Denken Sie daran, das Ausgabebündel umzubenennen.
Es sollte nicht mehr als ein Bündel pro Seite geben. Wenn Sie beispielsweise die %code% und die %code% auf der Homepage benötigen, sollten Sie wahrscheinlich %code% erstellen, die %code% und %code% verwenden, und eine Konfiguration in %code% erstellen, um% zu erstellen. co_de%
%Vor%
tsconfig.json
%Vor%
Ausführen
Geben Sie %code% in das Verzeichnis ein, in dem sich %code% befindet.
Hinzufügen von JS zu Ihrer Twig-Datei
Irgendwo in einer Ihrer Vorlagen.
%Vor%
Und führen Sie die folgenden Befehle für jedes neue %code% aus, das zum ersten Mal im Stammverzeichnis Ihres symfony-Projekts erstellt wurde:
%Vor%