Get best of the week

¿Cómo reutilizar el código con los paquetes de Symfony 5? Parte 3. Integración del paquete con el host: plantillas, estilos, JS

Hablemos sobre cómo detener el copiar y pegar entre proyectos y transferir el código a un paquete de plug-in reutilizable Symfony 5. Una serie de artículos que resumen mi experiencia con los paquetes se llevarán a cabo en la práctica desde la creación de un paquete mínimo y la refactorización de una aplicación de demostración para las pruebas y el ciclo de lanzamiento del paquete.


En el artículo anterior, eliminamos el código principal y las plantillas en el paquete, configuramos el enrutamiento y la conexión de servicios en el contenedor de Inyección de dependencias. En este artículo, integraremos el paquete en la aplicación host:


  • Integración de plantillas: 2 formas
  • Integración de plantillas: módulo independiente
  • Conexión de estilos de paquete a un ensamblaje
  • Integración de plantillas: incrustación en plantillas de host
  • Estilos primordiales y JS

Contenido de la serie

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


Si no está completando el tutorial secuencialmente, descargue la aplicación desde el repositorio:
https://github.com/bravik/symfony-bundles-tutorial/
y cambie a la rama 2-basic-refactoring .


Instrucciones para instalar e iniciar el proyecto en un archivo README.md.
Encontrará la versión final del código para este artículo en el vector de 3 integraciones .


Integración de plantillas


, .


. 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.


, .


:


Parte 1. El paquete mínimo
Parte 2. Sacamos el código y las plantillas en el paquete
Parte 3. Integración del paquete con el host: plantillas, estilos, JS
Parte 4. Interfaz para expandir el paquete
Parte 5. Parámetros y configuración
Parte 6. Pruebas, microaplicación dentro del paquete
Parte 7 Ciclo de lanzamiento, instalación y actualización.

More articles:


All Articles