回到symfon欧宝娱乐app下载地址y.com

安可:设置你的项目

编辑本页

警告:您正在浏览的文档欧宝体育电话欧宝娱乐app下载地址Symfony 4.4，现已不再维护。

读本页的更新版本用于Sy欧宝娱乐app下载地址mfony 6.2(当前稳定版本)。

安可:设置你的项目

后安装安可，你的应用程序已经有一些文件，组织成一个资产/目录:

  • 资产/ app.js
  • 资产/ bootstrap.js
  • 资产/ controllers.json
  • 资产/风格/ app.css
  • 资产/控制器/ hello_controller.js

用安可，想起你app.js文件，就像一个独立的JavaScript应用程序:它会需要它需要的所有依赖(例如jQuery或React)，包括任何CSS。你的app.js文件已经用JavaScript完成了这个进口声明:

1 2 3 4
/ /资产/ app.js/ /……进口“/风格/ app.css。”；

Encore的工作(通过Webpack)很简单:阅读和跟随所有的进口语句并创建一个finalapp.js(和app.css)，包含一切你的应用需要。Encore可以做更多的事情:缩小文件，预处理Sass/LESS，支持React, Vue.js等。

其他文件bootstrap.js，controllers.json而且hello_controller.js和你即将学习的话题相关:刺激和Symfony 欧宝娱乐app下载地址UX．

配置安可/ Webpack

Encore中的所有内容都是通过webpack.config.js文件在您的项目的根。它已经包含了你需要的基本配置:

12 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/ / webpack.config.js常量安可=需要（“@欧宝娱乐app下载地址symfony / webpack-encore”）;再来一个//存放已编译资产的目录.setOutputPath (“公共/构建/”）// web服务器访问输出路径所使用的公共路径.setPublicPath (/构建的) .addEntry (“应用程序”，“/资产/ app.js。”）//取消注释如果你想在下面的例子中使用jQuery.autoProvidejQuery ();/ /……

的关键部分是addEntry ():这告诉Encore加载资产/ app.js文件和跟踪所有的要求()语句。然后它会把所有东西打包在一起，感谢第一个应用程序参数-输出finalapp.js而且app.css文件放入公共/构建目录中。

要构建资产，如果你使用Yarn包管理器，运行以下命令:

12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
# compile资产并在文件更改时自动重新编译＄纱看#或＄NPM运行监视#或者，运行一个dev-server，它有时可以在不刷新页面的情况下更新代码＄纱dev-server#或＄运行dev-server#编译一次资产＄纱线开发#或＄运行开发# on deploy，创建一个产品版本＄纱构建#或＄NPM运行构建

所有这些命令-例如。dev或看中定义的快捷方式package.json文件。

谨慎

当你在你的webpack.config.js文件，必须停止并重新启动再来一个．

恭喜!你现在有三个新文件:

  • 公共/构建/ app.js(保存你的“app”条目的所有JavaScript代码)
  • 公共/构建/ app.css(保存你的“app”条目的所有CSS)
  • 公共/构建/ runtime.js(一个帮助Webpack完成工作的文件)

请注意

实际上，你可能有一些更多的文件公共/构建．其中一些原因是代码分离这种优化有助于提高性能，但不会影响事物的工作方式。其他人则帮助Encore完成工作。

接下来，要在你的基本布局中包含这些，你可以利用WebpackEncoreBundle中的两个Twig helper:

12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
{/ base.html #模板。树枝#}<！文档类型超文本标记语言><超文本标记语言><头><！——……-->{%块样式表%}{# 'app'必须匹配webpack.config.js中addEntry()的第一个参数{{encore_entry_link_tags('app')}}<！——渲染一个链接标签(如果你的模块需要任何CSS) ——> . CSS{%endblock%}{%块javascripts %}{{encore_entry_script_tags('app')}}<！——渲染app.js & webpack runtime.js文件 参见下面关于"defer"属性的说明——> .js{%endblock%}头><！——……-->超文本标记语言>

就是这样!当你刷新你的页面时，所有的JavaScript资产/ app.js-以及它包含的任何其他JavaScript文件-将被执行。还将显示所需的所有CSS文件。

的encore_entry_link_tags ()而且encore_entry_script_tags ()从公共/构建/ entrypoints.json由Encore生成的文件，以知道要渲染的确切文件名。这个文件是特别是有用是因为你可以启用版本控制或将资产指向CDN不作任何对模板的更改:路径entrypoints.json永远都是最终正确的道路。如果你用splitEntryChunks ()(Webpack将输出拆分为更多的文件)，所有必要的脚本而且链接标签将自动呈现。

如果你不使用Symf欧宝娱乐app下载地址ony，您可以忽略entrypoints.json文件并指向最终，直接构建文件。entrypoints.json仅对某些可选特性必需。

1.9.0

的推迟属性上的脚本标记将延迟JavaScript的执行，直到页面加载为止(类似于将脚本在这页的底部)。在WebpackEncoreBundle 1.9.0中引入了始终添加此属性的能力，并在该bundle的recipe中自动启用配置/包/ webpack_encore.yaml文件。看到WebpackEncoreBundle配置欲知详情。

需要JavaScript模块

Webpack是一个模块捆绑器，这意味着你可以进口其他JavaScript文件。首先，创建一个导出函数、类或任何其他值的文件:

1 2 3 4
/ /资产/ greet.js出口默认的函数（的名字）｛返回“溜溜球${名称}-欢迎来到安可!｀；}；

我们将使用jQuery在页面上打印这条消息。安装方法:

1 2 3 4 5
#如果你使用Yarn包管理器＄Yarn添加jquery#如果你使用NPM包管理器＄NPM安装jquery

太棒了!使用进口进口jquery而且greet.js：

12 3 4 5 6 7 8 9 10 11 12 13
// assets/app.js //…+ //从node_modules加载jquery包导入jquery jquery $;+ //从greet.js导入函数(.js扩展名是可选的)+ // ./(或../)表示查找本地文件+ import greet from './greet';+ $(document).ready(function() {+ $(身体).prepend(“< h1 >”+问候(“吉尔”)+ < / h1 >);+});

就是这样!如果你以前参加过返场开发——观看，您的最终，构建文件已经更新:jQuery和greet.js已自动添加到输出文件(app.js)．刷新查看消息!

刺激和Symfony 欧宝娱乐app下载地址UX

就像上面的例子一样简单，而不是在app.js，我们推荐刺激:一个小的JavaScript框架，可以很容易地将行为附加到HTML。它很强大，你会爱上它的!欧宝娱乐app下载地址Symfony甚至提供了向Stimulus添加更多特性的软件包。这些被称为Symfony UX包。欧宝娱乐app下载地址

如果您遵循了安装说明，您应该已经安装了刺激计划并准备好了!事实上，这就是资产/ bootstrap.js文件:初始化Stimulus并自动从资产/控制器/目录中。

让我们看一个简单的刺激方案示例。在一个Twig模板中，假设你有:

1 2 3 4 5 6 7 8 9
<div{{刺激性控制器('say-hello')}}><输入类型＝“文本”{{stimulus us_target('say-hello'， 'name')><按钮{{stimulus us_action('say-hello'， 'greet')}}>问候按钮><div{{stimulus us_target('say-hello'， 'output')}}>div>div>

的stimulus_controller(“打招呼”)呈现数据控制器=“打个招呼”属性。每当这个元素出现在页面上时，刺激将自动寻找并初始化一个名为say-hello-controller.js．在你的资产/控制器/目录:

1 2 3 4 5 6 7 8 9 10
/ /资产/控制器/ say-hello-controller.js进口{控制器}从“@hotwired /刺激”；出口默认的类扩展控制器｛静态目标= [“名字”，“输出”] greet() {这.outputTarget。textContent =“你好,$ {这.nameTarget.value}!”}}

结果呢?当你点击“问候”按钮时，它会打印出你的名字!如果更多{{刺激性控制器('say-hello')}}元素被添加到页面-像通过Ajax -这些将立即工作:不需要重新初始化任何东西。

准备好了解更多有关刺激计划的信息了吗?

Turbo:闪电般的单页应用程序体验

欧宝娱乐app下载地址Symfony与另一个JavaScript库紧密集成涡轮增压．Turbo自动将所有链接点击和表单提交转换为Ajax调用，对Symfony代码的更改为零(或几乎为零)!欧宝娱乐app下载地址结果呢?您无需编写任何JavaScript就可以获得单页应用程序的速度。

要了解更多，请查看欧宝娱乐app下载地址symfony / ux-turbo包中。

截屏视频

或者查看涡轮视频Sym欧宝娱乐app下载地址fonyCasts。

特定页面的JavaScript或CSS

到目前为止，你只有一个JavaScript文件:app.js．返场可以分成多个文件的性能(见分割的块)，但所有这些代码仍然可以在每个页面上下载。

如果你有一些额外的JavaScript或CSS(例如性能)，你只想包括在某些页面?

懒惰的控制器

如果你在使用刺激计划，一个很好的解决方案是杠杆懒惰的控制器．要在控制器上激活它，请添加一个特殊的stimulusFetch:“懒”在你的控制器类上面:

1 2 3 4 5 6 7
/ /资产/控制器/ lazy-example-controller.js进口{控制器}从“@hotwired /刺激”；/*刺激性取回:'lazy' */出口默认的类扩展控制器｛/ /……｝

就是这样!这个控制器的代码——以及它导入的任何模块——将被分割到单独的文件由安可。然后，这些文件将不会被下载，直到匹配的元素(例如。< div数据控制器= " lazy-example " >)出现在页面上!

多个条目

另一种选择是创建特定于页面的JavaScript或CSS(例如结帐、帐户等)。要处理这个问题，为每个页面创建一个新的“入口”JavaScript文件:

1 2
/ /资产/ checkout.js//结帐页面的自定义代码
1 2
/ /资产/ account.js//自定义代码为您的帐户页面

下一步,使用addEntry ()告诉Webpack在构建时读取这两个新文件:

1 2 3 4 5 6 7
/ / webpack.config.js安可/ /….addEntry(“应用程序”,“。/资产/ app.js”)+ . addentry ('checkout'， './assets/checkout.js')+ . addentry ('account'， './assets/account.js')/ /……

因为你刚刚改变了webpack.config.js文件，确保停止并重新启动Encore:

1 2 3 4 5
#如果你使用Yarn包管理器＄纱看#如果你使用NPM包管理器＄NPM运行监视

Webpack现在将输出一个新的checkout.js文件和一个新的account.js文件在构建目录中。如果这些文件需要/导入CSS, Webpack也会这样做也输出checkout.css而且account.css文件。

最后，包括脚本而且链接标签在你需要它们的个别页面上:

12 3 4 5 6 7 8 9 10 11 12
{/…/ checkout.html #模板。枝条#}{%扩展'base.html。嫩枝' %}+{%块样式表%}+ {{parent()}}+ {{encore_entry_link_tags('checkout')}}+ {% endblock %}+ {% block javascript %}+ {{parent()}}+ {{encore_entry_script_tags('checkout')}}+ {% endblock %}

现在，结帐页面将包含所有JavaScript和CSS应用程序条目(因为它包含在base.html.twig这就是{{parent()}}调用)而且你的结帐条目。有了这个，JavaScript和CSS所需的每个页面可以生活在应用程序仅用于结帐页面的条目和代码可以驻留在内部结帐．

使用Sass /不/笔

你已经掌握了安可的基本知识。好了!但是，有许多如果你需要，你可以选择更多的功能。例如，除了使用普通的CSS，你也可以使用Sass, LESS或Stylus。要使用Sass，请重命名app.css文件app.scss并更新进口声明:

1 2 3
/ /资产/ app.js- import ` ./styles/app.css `;+ import ` ./styles/app.scss `;

然后，告诉Encore启用Sass预处理器:

1 2 3 4 5 6
// webpack.config.js Encore //…+ .enableSassLoader ()；

因为你刚换了你的webpack.config.js文件，您需要重新启动安可。当您这样做时，您将看到一个错误!

1 2
>错误:安装sass-loader & sass使用enableSassLoader() > yarn添加sass-loader@^12.0.0 sass——dev

Encore支持许多特性。但是，当你需要一个功能时，Encore会告诉你需要安装什么，而不是把所有的功能都强加给你。运行:

1 2 3 4 5 6 7
#如果你使用Yarn包管理器＄Yarn添加sass-loader@^12.0.0 sass——dev＄纱线返场开发——看#如果你使用NPM包管理器＄NPM安装sass-loader@^12.0.0＄NPM运行监视

您的应用程序现在支持Sass。Encore还支持LESS和Stylus。看到CSS预处理器:Sass, LESS, Stylus等。．

只编译CSS文件

谨慎

使用addStyleEntry ()支持，但不推荐。更好的选择是遵循上面的模式:使用addEntry ()指向一个JavaScript文件，然后从该文件中要求所需的CSS。

如果你只想编译一个CSS文件，这是可能的通过addStyleEntry ()：

1 2 3 4 5 6
/ / webpack.config.js再来一个/ /…….addStyleEntry (“some_page”，”。/资产/风格/ some_page.css”） ;

这将输出一个newsome_page.css．

继续前进!

Encore支持更多的特性!有关您可以做什么的完整列表，请参见Encore的index.js文件．或者，回到Frontend文章列表．

此工作，包括代码示例，是根据创作共用BY-SA 3.0许可证。
没有压力:我们已经为您提供了116个自动代码质量检查

没有压力:我们已经为您提供了116个自动代码质量检查

欧宝娱乐app下载地址Symfony代码性能分析

欧宝娱乐app下载地址Symfony代码性能分析

接受SensioLabs专家的培训(2 - 6天的课程-法语或英语)。

接受SensioLabs专家的培训(2 - 6天的课程-法语或英语)。