لنتحدث عن كيفية إيقاف النسخ واللصق بين المشاريع ونقل الشفرة إلى حزمة مكون إضافي symfony 5. يمكن إعادة استخدامها. ستؤدي سلسلة من المقالات التي تلخص تجربتي مع الحزم عمليًا إلى إنشاء الحد الأدنى من الحزم وإعادة صياغة التطبيق التجريبي إلى الاختبارات ودورة إصدار الحزمة.
في المقالة السابقة ، أزلنا الشفرة الرئيسية والقوالب في الحزمة ، وقمنا بإعداد التوجيه وتوصيل الخدمات في حاوية حقن التبعية. في هذه المقالة ، سنقوم بتضمين الحزمة في التطبيق المضيف:
- تكامل القالب: 2 طرق
- تكامل القالب: وحدة مستقلة
- ربط أنماط الحزم بالتجميع
- تكامل القالب: التضمين في قوالب المضيف
- تجاوز الأنماط و شبيبة
إذا كنت لا تكمل البرنامج التعليمي بالتسلسل ، فقم بتنزيل التطبيق من المستودع:
https://github.com/bravik/symfony-bundles-tutorial/
وقم بالتبديل إلى فرع 2-basic-refactoring .
تعليمات تثبيت وبدء المشروع في ملف README.md.
ستجد النسخة النهائية من التعليمات البرمجية لهذه المقالة في ناقلات التكامل 3 .
تكامل القالب
, .
. 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);
global.bravikCalendar.init();
-: - , JS , . , «» .
3-integration.
, .
:
الجزء 1. الحد الأدنى للحزمة
الجزء 2. نأخذ الشفرة والقوالب في الحزمة
الجزء 3. تكامل الحزمة مع المضيف: القوالب ، الأنماط ، JS
الجزء 4. واجهة لتوسيع الحزمة
الجزء 5. المعلمات والتكوين
الجزء 6. الاختبار ، التطبيق الجزئي داخل الحزمة
الجزء 7 دورة الإصدار والتثبيت والتحديث