Get best of the week

如何在symfony 5 bundle中重用代码？第3部分。捆绑包与主机的集成：模板，样式，JS

让我们谈谈如何停止项目之间的复制粘贴并将代码转移到可重复使用的插件包Symfony 5中。在实践中总结了一系列关于包的经验的文章，将从创建最小的包，重构演示应用程序到测试以及包发布周期的实践中进行。


在上一篇文章中，我们将主要代码和模板删除到了包中，并在Dependency Injection容器中设置了服务的路由和连接。在本文中，我们将把捆绑包嵌入到主机应用程序中：


  • 模板集成：2种方式
  • 模板集成：独立模块
  • 将线束样式连接到装配体
  • 模板集成：嵌入主机模板
  • 覆盖样式和JS

系列内容

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


如果您没有按顺序完成本教程，请从存储库中下载应用程序：
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);
// And more ...
global.bravikCalendar.init();


     -: -   ,  JS ,   .    ,   «»    .


3-integration.


, .


:


1.部分最小包
2的一部分，我们拿出包中的代码和模板
第3部分集成与主机捆绑的：模板，样式，JS
第4部分接口扩展包
第5部分参数及配置
部分6.测试，该包内microapplication
第7发布周期，安装和更新

More articles:


All Articles