安可:设置您的项目
编辑该页面警告:你浏览的文档欧宝官网下载appob娱乐下载Symfony 5.1,不再维护。
读这个页面的更新版本Symfob娱乐下载ony 6.2(当前的稳定版本)。
安可:设置您的项目
后安装安可,你的应用程序已经有了一个CSS和一个JS文件,组织成一个资产/目录:
资产/ app.js资产/风格/ app.css
再来一个,觉得你的app.js文件就像一个独立的JavaScript应用程序:它将需要所有所需的依赖项(如jQuery或反应),包括任何CSS。你的app.js用JavaScript文件已经这样做进口声明:
1 2 3 4 5 6
/ /资产/ app.js/ /……进口“/风格/ app.css。”;/ /导入从jquery的美元;安可的工作(通过Webpack)很简单:阅读并遵循所有的要求()语句和创建一个决赛app.js(和app.css),其中包含一切您的应用程序需求。安可可做更多:贬低文件,预处理Sass /少,支持反应,Vue。js等。
配置安可/ Webpack
安可的一切都是通过一个配置webpack.config.js项目文件的根源。它已经拥有你所需要的基本配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
/ / webpack.config.jsvar安可=需要(“@ob娱乐下载symfony / webpack-encore”);再来一个/ /编译目录资产存储.setOutputPath (“公共/构建/”)/ /公共道路使用的web服务器访问输出路径.setPublicPath (/构建的).addEntry (“应用程序”,“/资产/ app.js。”)/ /……;/ /……的关键部分是addEntry ():这告诉安可加载资产/ app.js文件和遵循所有的要求()语句。这一切将包在一起,——由于第一应用程序参数,输出最终app.js和app.css文件到公共/构建目录中。
建立资产,运行:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
#编译资产一旦美元纱安可dev#如果你喜欢npm,运行:美元npm运行开发#,或者重新编译资产文件时自动改变美元纱安可dev -手表#如果你喜欢npm,运行:美元npm运行看#在部署,创建一个生产制造美元纱安可生产#如果你喜欢npm,运行:美元npm运行构建请注意
停止并重启再来一个每次你更新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永远是最后一个,正确的路径。
如果你不使用Symfob娱乐下载ony,可以忽略entrypoints.json文件和指向最后一个,直接建立文件。entrypoints.json只是需要一些可选特性。
1.9.0
的推迟属性脚本标签延迟JavaScript的执行,直到页面加载(类似于把脚本在页面的底部)。能力总是添加该属性中引入WebpackEncoreBundle 1.9.0和自动启用,包的配方配置/包/ webpack_encore.yaml文件。看到WebpackEncoreBundle配置为更多的细节。
需要JavaScript模块
Webpack打包机是一个模块,这意味着您可以需要其他的JavaScript文件。首先,创建一个文件,出口一个函数:
1 2 3 4
/ /资产/ greet.js模块. export =函数(的名字){返回“溜溜球${名称}——欢迎再来一个!”;};我们将使用jQuery来打印页面上的这个消息。通过安装:
1
美元纱添加jquery开发太棒了!使用要求()进口jquery和greet.js:
1 2 3 4 5 6 7 8 9 10 11 12 13
/ /资产/ app.js/ /……+ / /加载jquery node_modules寄来的包裹+ var =美元需要(“jquery”);从迎接+ / /导入功能。js (js扩展是可选的)+ / /,/(. . /)意味着寻找一个本地文件+ var =需要打招呼(' /打招呼。');+ $(文档)时函数(){+ $(身体).prepend (“< h1 >”+问候(“吉尔”)+ < / h1 >);+});就是这样!如果你以前跑安可dev -手表你最后,构建文件已经更新:jQuery和greet.js被自动添加到输出文件(app.js)。刷新查看消息!
导入和导出报表
而不是使用要求()和module.exports如上图所示,JavaScript提供了另一种语法的基础上ECMAScript 6模块进口,包括使用动态的能力。
导出值使用替代语法,使用出口:
1 2 3 4 5
/ /资产/ greet.js——模块。出口s = function(name) {< /span>+出口默认函数(名字){返回的溜溜球${名称}——欢迎来到安可!”;};进口价值,使用进口:
1 2 3 4 5 6 7 8 9
/ /资产/ app.js——需要(“. . /风格/ app.css”);+进口“。/风格/ app.css”;——var =美元需要(“jquery”);从“jquery +进口美元;- var =需要打招呼(' /打招呼。');+进口问候'。/问候';特殊页面的JavaScript和CSS(多个条目)
到目前为止,你只有最后一个JavaScript文件:app.js。对于小应用程序或水疗(单页应用程序),这可能是好!然而,随着应用程序的增长,您可能想要特殊页面的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
美元纱线运行安可dev -手表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和有{{父()}}调用)和你的结帐条目。
看到创建特殊页面的CSS / JS为更多的细节。为了避免重复相同的代码在不同的入口文件,看看防止由“分裂”共享代码复制到单独的文件中。
使用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@ ^ 10.0.0 sass - dev安可支持许多功能。但是,而不是强迫他们所有人,当你需要一个功能,安可会告诉你你需要安装什么。运行:
1 2
美元纱添加sass-loader@ ^ 10.0.0 sass - dev美元纱安可dev -手表应用程序现在支持萨斯。安可少还支持手写笔。看到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文件。或者,回到安可的文章列表。
