Get best of the week

Bagaimana cara menggunakan kembali kode dengan bundel symfony 5? Bagian 3. Integrasi bundel dengan host: templates, styles, JS

Mari kita bicara tentang cara menghentikan copy-paste antara proyek dan mentransfer kode ke bundel plug-in yang dapat digunakan kembali Symfony 5. Serangkaian artikel yang merangkum pengalaman saya dengan bundel akan dilakukan dalam praktik dari membuat bundel minimal dan refactoring aplikasi demo untuk pengujian dan siklus rilis bundel.


Pada artikel sebelumnya, kami menghapus kode utama dan templat ke dalam bundel, mengatur perutean dan koneksi layanan dalam wadah Ketergantungan Injeksi. Dalam artikel ini, kami akan menyematkan bundel dalam aplikasi host:


  • Integrasi Template: 2 Cara
  • Integrasi Template: Modul Independen
  • Menghubungkan gaya bundel ke unit
  • Integrasi Template: Memasukkan dalam Host Template
  • Gaya utama dan JS

Konten Seri

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


Jika Anda tidak menyelesaikan tutorial secara berurutan, maka unduh aplikasi dari repositori:
https://github.com/bravik/symfony-bundles-tutorial/
dan beralih ke cabang 2-dasar-refactoring .


Petunjuk untuk menginstal dan memulai proyek dalam file README.md.
Anda akan menemukan versi final kode untuk artikel ini dalam vektor 3-integrasi .


Integrasi Template


, .


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


, .


:


Bagian 1. Bundel minimum
Bagian 2. Kami mengeluarkan kode dan templat dalam bundel
Bagian 3. Integrasi bundel dengan host: templat, gaya, JS
Bagian 4. Antarmuka untuk memperluas bundel
Bagian 5. Parameter dan konfigurasi
Bagian 6. Pengujian, aplikasi mikro di dalam bundel
Bagian 7 Lepaskan siklus, instalasi, dan perbarui

More articles:


All Articles