Get best of the week

Como reutilizar código com pacotes symfony 5? Parte 3. Integração do pacote configurável com o host: modelos, estilos, JS

Vamos falar sobre como parar a copiar e colar entre projetos e transferir o código para um pacote reutilizável de plug-in do symfony 5. Uma série de artigos que resumem minha experiência com pacotes configuráveis ​​levará, na prática, a criação de um pacote mínimo e a refatoração de um aplicativo demo para testes e o ciclo de lançamento de pacotes.


No artigo anterior, removemos o código principal e os modelos do pacote configurável, configuramos o roteamento e a conexão de serviços no contêiner de Injeção de Dependência. Neste artigo, incorporaremos o pacote no aplicativo host:


  • Integração de modelos: 2 maneiras
  • Integração de modelos: Módulo Independente
  • Conectando estilos de pacote configurável a uma montagem
  • Integração de modelos: incorporação em modelos de host
  • Substituindo estilos e JS

Conteúdo da Série

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


Se você não estiver concluindo o tutorial sequencialmente, faça o download do aplicativo no repositório:
https://github.com/bravik/symfony-bundles-tutorial/
e alterne para o ramo de 2-refatoração básica .


Instruções para instalar e iniciar o projeto em um arquivo README.md.
Você encontrará a versão final do código deste artigo no vetor de 3 integrações .


Integração de modelos


, .


. 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. O pacote mínimo
Parte 2. Retiramos o código e os modelos no pacote
Parte 3. Integração do pacote com o host: modelos, estilos, JS
Parte 4. Interface para expandir o pacote
Parte 5. Parâmetros e configuração
Parte 6. Teste, microaplicação dentro do pacote
Parte 7 Ciclo de lançamento, instalação e atualização

More articles:


All Articles