Get best of the week

Wie kann man Code mit Symfony 5-Bundles wiederverwenden? Teil 3. Integration des Bundles in den Host: Vorlagen, Stile, JS

Lassen Sie uns darüber sprechen, wie Sie das Kopieren und Einfügen zwischen Projekten stoppen und den Code in ein wiederverwendbares Symfony 5-Plug-In-Bundle übertragen können. Eine Reihe von Artikeln, die meine Erfahrungen mit Bundles zusammenfassen, führen in der Praxis von der Erstellung eines minimalen Bundles und der Umgestaltung einer Demo-Anwendung zu Tests und dem Bundle-Release-Zyklus.


Im vorherigen Artikel haben wir den Hauptcode und die Vorlagen aus dem Bundle entfernt und das Routing und die Verbindung von Diensten im Container "Abhängigkeitsinjektion" eingerichtet. In diesem Artikel werden wir das Bundle in die Host-Anwendung einbetten:


  • Vorlagenintegration: 2 Möglichkeiten
  • Vorlagenintegration: Unabhängiges Modul
  • Verbinden von Bundle-Stilen mit einer Baugruppe
  • Vorlagenintegration: Einbetten in Hostvorlagen
  • Überschreiben von Stilen und JS

Serieninhalt

1.
2.
3. : , , JS
4.
5.
6. ,
7. ,


Wenn Sie das Lernprogramm nicht nacheinander abschließen, laden Sie die Anwendung aus dem Repository herunter:
https://github.com/bravik/symfony-bundles-tutorial/
und wechseln Sie zum Zweig 2-basic-refactoring .


Anweisungen zum Installieren und Starten des Projekts in einer Datei README.md.
Die endgültige Version des Codes für diesen Artikel finden Sie im 3-Integrationsvektor .


Vorlagenintegration


, .


. base.html.twig, -:


{% extends 'base.html.twig' %}

HTML- , . , , - . ?


2 : , .

, .


:


reusability, . base.html.twig, .


:


  • include menu.html.twig —
  • {{ encore_entry_link_tags('host-styles') }} {{ encore_entry_script_tags('host-app') }} — entry- , webpack encore

templates/editor/* :


{% extends 'base.html.twig' %}
 
{% extends '@Calendar/base.html.twig' %}

. .


, . … HTML HTML- .



SCSS, — Symfony Encore ( Symfony, Webpack).


entry-. Entry- — , . webpack.config.js.


Entry- twig- encore_entry_link_tags(entry-file) encore_entry_script_tags(entry-file), Encore.


entry- . assets :


cp ./assets ./bundles/CalendarBundle/assets -R

entry-:


mv host-app.js calendar-editor-app.js
mv host-styles.scss calendar-editor-styles.scss

assets/scss/events/_main.scss calendar-editor-styles.scss.


, scss/events/calendar.scss, — . , assets . hosts-styles.scss :


@import "../../vendor/bravik/calendar-bundle/assets/scss/widget/calendar";

, calendar-editor-styles.scss.


WebpackEncore entry- webpack.config.js:


Encore
// ...
.addEntry(
    'calendar-editor-app',
     './vendor/bravik/calendar-bundle/assets/js/calendar-editor-app.js'
)
.addStyleEntry(
    'calendar-editor-styles',
     './vendor/bravik/calendar-bundle/assets/scss/calendar-editor-styles.scss'
)

, ./bundles/CalendarBundle, vendors. composer . vendors () .


.
Encore-: npm start.
— .
- , git- 3-integration .


entry- .


@Calendar/base.html.twig stylesheets :


{{ encore_entry_link_tags('calendar-editor-styles') }}

javascripts:


{{ encore_entry_script_tags('calendar-editor-app') }}


: .


— : , , , , .

:


— , . , , , .


,
?

API? , API? , .


, : , . , .


Symfony . , .

templates bundles/CalendarBundle. .


Symfony templates , templates/bundles/< > . , templates .


, templates/bundles/CalendarBundle , .


base.html.twig. :


cp ./bundles/CalendarBundle/templates/base.html.twig ./templates/bundles/CalendarBundle/base.html.twig

. <body>:


{% include 'menu.html.twig' %}

, — !



, . , . .


. , . , . .



templates/bundles/CalendarBundle/base.html.twig:


{% extends 'base.html.twig' %}

base.html.twig — .


HTML . , , . , .


{% extends 'base.html.twig' %}

{% block title %} {% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('calendar-editor-styles') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('calendar-editor-app') }}
{% endblock %}

{{ parent() }} , :


, . .


— .

, . :


{% extends 'base.html.twig' %}

{% block title %}
    {%- block calendar_title %} {% endblock -%}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('calendar-editor-styles') }}
    {% block calendar_styles %}{% endblock %}
{% endblock %}

{% block body %}
    {%- block calendar_body %}{% endblock -%}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('calendar-editor-app') }}
    {% block calendar_scripts %}{% endblock %}
{% endblock %}

, , / .



entry- .


, , , entry-, .


, overriden-calendar-styles.scss:


//    
@import "../../vendor/bravik/calendar/assets/scss/calendar-styles";

//   
@import "calendar/customizations";

entry- , .


- , entry- -. , .


JavaScript


entry- JavaScript.


JS-. entry- :


import CalendarApp from "../calendar/CalendarApp";

global.bravikCalendar = new CalendarApp();
global.bravikCalendar.init();

Entry- . , .

, CalendarApp.
, . :


import CalendarApp from "../../vendor/bravik/calendar/assets/js/calendar/CalendarApp";
import myCustomLogic from "./MyCutomLogic";

global.bravikCalendar = new CalendarApp();
global.bravikCalendar.registerSomeCustomLogic(myCustomLogic);
// And more ...
global.bravikCalendar.init();


     -: -   ,  JS ,   .    ,   «»    .


3-integration.


, .


:


Teil 1. Das minimale Bundle
Teil 2. Wir nehmen den Code und die Vorlagen im Bundle heraus.
Teil 3. Integration des Bundles mit dem Host: Vorlagen, Stile, JS
Teil 4. Schnittstelle zum Erweitern des Bundles
Teil 5. Parameter und Konfiguration
Teil 6. Testen, Mikroanwendung innerhalb des Bundles
Teil 7 Release-Zyklus, Installation und Update

More articles:


All Articles