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

安可:设置您的项目

编辑该页面

安可:设置您的项目

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

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

再来一个,觉得你的app.js文件就像一个独立的JavaScript应用程序:它将需要所有所需的依赖项(如jQuery或反应),包括任何CSS。你的app.js用JavaScript文件已经这样做进口声明:

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

安可的工作(通过Webpack)很简单:阅读并遵循所有的进口语句和创建一个决赛app.js(和app.css),其中包含一切您的应用程序需求。安可可做更多:贬低文件,预处理Sass /少,支持反应,Vue。js等。

其他文件-bootstrap.js,controllers.json和hello_controller.js你很快就会了解相关主题:刺激和Symfony用欧宝娱乐app下载地址户体验。

配置安可/ Webpack

安可的一切都是通过一个配置webpack.config.js项目文件的根源。它已经拥有你所需要的基本配置:

1 2 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 ():这告诉安可加载资产/ app.js文件和遵循所有的要求()语句。这一切将包在一起,——由于第一应用程序参数,输出最终app.js和app.css文件到公共/构建目录中。

建立资产,运行以下如果使用纱包管理器:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
#编译时资产和自动编译文件变化美元纱看#或美元npm运行看#或者运行一个dev-server有时会更新你的代码,而无需刷新页面美元纱dev-server#或美元npm dev-server运行#编译资产一旦美元纱线开发#或美元npm运行开发#在部署,创建一个生产制造美元纱构建#或美元npm运行构建

所有这些命令——如。dev或看——在你的快捷键定义package.json文件。

谨慎

只要你做出改变webpack.config.js文件,你必须停止并重新启动再来一个。

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

  • 公共/构建/ app.js(持有的所有JavaScript应用程序条目)
  • 公共/构建/ app.css(持有的所有CSS“应用”条目)
  • 公共/构建/ runtime.js(一个文件,帮助Webpack做它的工作)

请注意

在现实中,你可能有一些更多的文件公共/构建。其中的一些是由于代码分离性能优化,帮助,但并不影响事物是如何工作的。别人帮助安可做它的工作。

接下来,将这些包含在你的基地布局,您可以利用两个树枝从WebpackEncoreBundle助手:

1 2 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 #模板。树枝#}< ! DOCTYPEhtml><html><头>< !——……- - >{%块样式表%}{#‘应用’必须匹配第一个参数在webpack.config addEntry ()。js #}{{encore_entry_link_tags(“软件”)}}< !——呈现链接标签(如果您的模块需要任何CSS) < link rel = "样式表" href = " /构建/应用程序。css " > - - >{%endblock%}{%块javascripts %}{{encore_entry_script_tags(“软件”)}}< !——呈现app.js & webpack运行时。js文件< script src = " /构建/运行时。js "推迟> < /脚本> < script src = " /构建/应用程序。js "推迟> < /脚本>见下面的注意关于“推迟”属性- - >{%endblock%}< /头>< !——……- - >< /html>

就是这样!当你刷新页面,所有的JavaScript资产/ app.js——以及任何其他JavaScript文件,它包括——将被执行。所需的所有CSS文件也将显示出来。

的encore_entry_link_tags ()和encore_entry_script_tags ()函数读取公共/构建/ entrypoints.json文件生成的安可知道确切的文件名(s)来呈现。这个文件是特别是有用,因为你可以启用版本控制或点CDN的资产不作任何修改你的模板:路径entrypoints.json永远是最后一个,正确的路径。如果你使用splitEntryChunks ()(Webpack将输出分为更多的文件),所有必要的脚本和链接标签会自动呈现。

如果你不使用Symfony你不会有欧宝娱乐app下载地址encore_entry_ *函数可用。相反,您可以直接指向最终建立文件或编写代码来解析entrypoints.json手动。entrypoints文件只需要如果你使用某些可选特性,splitEntryChunks ()。

1.9.0

的推迟属性脚本标签延迟JavaScript的执行,直到页面加载(类似于把脚本在页面的底部)。能力总是添加该属性中引入WebpackEncoreBundle 1.9.0和自动启用,包的配方配置/包/ webpack_encore.yaml文件。看到WebpackEncoreBundle配置为更多的细节。

需要JavaScript模块

Webpack打包机是一个模块,这意味着您可以进口其他的JavaScript文件。首先,创建一个文件,出口一个函数,类或任何其他值:

1 2 3 4
/ /资产/ greet.js出口默认的函数(的名字){返回“溜溜球${名称}——欢迎再来一个!”;};

我们将使用jQuery来打印页面上的这个消息。通过安装:

1 2 3 4 5
#如果你用纱包管理器美元纱添加jquery开发#如果你使用npm包管理器美元npm安装jquery——save-dev

太棒了!使用进口进口jquery和greet.js:

1 2 3 4 5 6 7 8 9 10 11 12 13
/ /资产/ app.js/ /……+ / /加载jquery node_modules寄来的包裹从“jquery +进口美元;从迎接+ / /导入功能。js (js扩展是可选的)+ / /,/(. . /)意味着寻找一个本地文件+进口问候'。/问候';+ $(文档)时函数(){+ $(身体).prepend (“< h1 >”+问候(“吉尔”)+ < / h1 >);+});

就是这样!如果你以前跑安可dev -手表你最后,构建文件已经更新:jQuery和greet.js被自动添加到输出文件(app.js)。刷新查看消息!

刺激和Symfony用欧宝娱乐app下载地址户体验

像上面的例子是一样简单,而不是构建您的应用程序的内部app.js,我们建议刺激:一个JavaScript框架,让用户可以更方便的行为附加到HTML。这是强大的,你会喜欢的!欧宝娱乐app下载地址甚至Symfony提供了包添加更多特性刺激。这些被称为Symfony的UX包。欧宝娱乐app下载地址

如果你随后的安装指导,你应该已经安装了刺激和准备好了!事实上,的目的资产/ bootstrap.js文件:初始化刺激和自动加载任何“控制器”资产/控制器/目录中。

让我们看一个简单的刺激的例子。在一个树枝模板,假设你有:

1 2 3 4 5 6 7 8 9
<div{{stimulus_controller(打招呼)}}><输入类型=“文本”{{stimulus_target(“问好”,“名字”)}}><按钮{{stimulus_action(“问好”,“问候”)}}>问候< /按钮><div{{stimulus_target(“问好”,“输出”)}}>< /div>< /div>

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

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

结果呢?当你点击“问候”按钮,打印你的名字!如果更多的{{stimulus_controller(打招呼)}}元素被添加到页面——比如通过Ajax——那些将立即工作:不需要重新启动。

准备好学习更多关于刺激吗?

涡轮:闪电快速单页面程序经验

欧宝娱乐app下载地址Symfony提供了与另一个JavaScript库称为紧密集成涡轮增压。涡轮增压自动转换所有链接的点击和表单提交到一个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 /刺激”;/ * stimulusFetch:‘懒惰’* /出口默认的类扩展控制器{/ /……}

就是这样!该控制器的模块代码,任何进口——将分裂单独的再来一个文件。然后,这些文件不会下载到一个匹配的元素(如的那一刻。< div数据控制器= " lazy-example " >)出现在页面!

请注意

如果你写你的控制器使用打印稿,确保removeComments没有设置为真正的在你的打印稿配置。

多个条目

另一种选择是创建特殊页面的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', './assets/app.js')+ .addEntry(“结帐”,“。/资产/ checkout.js”)+ .addEntry(“账户”,“。/资产/ account.js”)/ /……

因为你只是改变了webpack.config.js文件,确保停止并重启再来一个:

1 2 3 4 5
#如果你用纱包管理器美元纱看#如果你使用npm包管理器美元npm运行看

Webpack现在将输出一个新的checkout.js文件和一个新的account.js文件的目录。如果任何这些文件需要/导入CSS, Webpack意志也输出checkout.css和account.css文件。

最后,包括脚本和链接个人页面上的标记,你需要:

1 2 3 4 5 6 7 8 9 10 11 12
{/…/ checkout.html #模板。树枝#}{% base.html延伸”。嫩枝' %}+{%块样式表%}父()+ {{}}+ {{encore_entry_link_tags(“结帐”)}}+ {% endblock %}+{%块javascripts %}父()+ {{}}+ {{encore_entry_script_tags(“结帐”)}}+ {% endblock %}

现在,结帐页面将包含所有的JavaScript和CSS应用程序条目(因为这是包含在base.html.twig和有{{父()}}调用)和你的结帐条目。,每个页面所需的JavaScript和CSS可以在生活应用程序条目和代码只需要结帐页面可以住在里面结帐。

使用Sass /不/笔

你已经掌握了基本的安可。好了!但是,有许多更多的功能,你可以选择,如果你需要他们。例如,而不是使用纯CSS还可以使用Sass,少或手写笔。使用Sass,重命名app.css文件app.scss和更新进口声明:

1 2 3
/ /资产/ app.js——进口“。/风格/ app.css”;+进口“。/风格/ app.scss”;

然后,告诉安可使Sass预处理:

1 2 3 4 5 6
/ / webpack.config.js再来一个/ /……+ .enableSassLoader ();

因为你只是改变了你webpack.config.js文件,您需要重新启动安可。当你做时,你将看到一个错误!

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

安可支持许多功能。但是,而不是强迫他们所有人,当你需要一个功能,安可会告诉你你需要安装什么。运行:

1 2 3 4 5 6 7
#如果你用纱包管理器美元纱添加sass-loader@ ^ 12.0.0 sass - dev美元纱安可dev -手表#如果你使用npm包管理器美元npm安装sass-loader@ ^ 12.0.0 sass——save-dev美元npm运行看

应用程序现在支持萨斯。安可少还支持手写笔。看到CSS预处理器:Sass,笔等。。

只编译一个CSS文件

谨慎

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

如果你想只编译一个CSS文件,这是有可能的addStyleEntry ():

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

这将输出一个新的some_page.css。

继续前进!

安可支持更多的功能!的完整列表你可以做什么,明白了安可的指数。js文件。或者,回到前端的文章列表。

这项工作,包括代码示例,许可下Creative Commons冲锋队3.0许可证。
< /article>
欧宝娱乐app下载地址Symfony 6.0是支持通过SensioLabs。
没有压力:116年我们有你覆盖着我们的自动化代码的质量检查

没有压力:116年我们有你覆盖着我们的自动化代码的质量检查

持续部署

持续部署

代码消耗服务器资源。黑焰告诉你

代码消耗服务器资源。黑焰告诉你