安可:设置您的项目

编辑该页面

警告:你浏览的文档欧宝官网下载appob娱乐下载Symfony 5.0,不再维护。

这个页面的更新版本Symfob娱乐下载ony 6.2(当前的稳定版本)。

安可:设置您的项目

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

  • 资产/ js / app.js
  • 资产/ css / app.css

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

1 2 3 4 5 6
/ /资产/ js / app.js/ /……进口“. . / css / app.css”;/ / var =美元需要(“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 (“应用程序”,”。/资产/ js / app.js”)/ /……;/ /……

关键部分是addEntry ():这告诉安可加载资产/ js / app.js文件和遵循所有要求()语句。这一切将包在一起,——由于第一应用程序参数,输出最终app.jsapp.css文件到公共/构建目录中。

建立资产,运行:

1 2 3 4 5 6 7 8
#编译资产一旦美元纱安可dev#,或者重新编译资产文件时自动改变美元纱安可dev -手表#在部署,创建一个生产制造美元纱安可生产

请注意

停止并重启再来一个每次你更新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资产/ js / app.js——以及任何其他JavaScript文件,它包括——将被执行。所需的所有CSS文件也将显示出来。

encore_entry_link_tags ()encore_entry_script_tags ()函数读取一个entrypoints.json文件生成的安可知道确切的文件名(s)来呈现。这个文件是特别是有用,因为你可以启用版本控制点CDN的资产不作任何修改你的模板:路径entrypoints.json永远是最后一个,正确的路径。

如果你使用Symfob娱乐下载ony,可以忽略entrypoints.json文件和指向最后一个,直接建立文件。entrypoints.json只是需要一些可选特性。

0.21.0

encore_entry_link_tags ()来自WebpackEncoreBundle和依赖于功能安可0.21.0,首次引入版本。在此之前,资产()函数是用来直接指向该文件。

需要JavaScript模块

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

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

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

1
美元纱添加jquery开发

太棒了!使用要求()进口jquerygreet.js:

1 2 3 4 5 6 7 8 9 10 11 12 13
/ /资产/ js / 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
/ /资产/ js / greet.js——模块。出口s = function(name) {< /span>+出口默认函数(名字){返回的溜溜球${名称}——欢迎来到安可!”;};

进口价值,使用进口:

1 2 3 4 5 6 7 8 9
/ /资产/ js / app.js——需要(“. . / css / app.css”);+进口“. . / css / app.css”;——var =美元需要(“jquery”);从“jquery +进口美元;- var =需要打招呼(' /打招呼。');+进口问候'。/问候';

特殊页面的JavaScript和CSS(多个条目)

到目前为止,你只有最后一个JavaScript文件:app.js。对于小应用程序或水疗(单页应用程序),这可能是好!然而,随着应用程序的增长,您可能想要特殊页面的JavaScript和CSS(如付款、账户等)。要处理这个问题,创建一个新的“条目”每个页面的JavaScript文件:

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

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

1 2 3 4 5 6 7
/ / webpack.config.js再来一个/ /……。addEntry('app', './assets/js/app.js')+ .addEntry(“结帐”,“。/资产/ js / checkout.js”)+ .addEntry(“账户”,“。/资产/ js / account.js”)/ /……

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

1
美元纱线运行安可dev -手表

Webpack现在将输出一个新的checkout.js文件和一个新的account.js文件的目录。如果任何这些文件需要/导入CSS, Webpack意志输出checkout.cssaccount.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
/ /资产/ js / app.js- - - - - -进口“. . / css / app.css”;+进口“. . / css / app.scss”;

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

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

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

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

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

1 2
美元纱添加sass-loader@ ^ 8.0.0 node-sass - dev美元纱安可dev -手表

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

只编译一个CSS文件

谨慎

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

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

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

这将输出一个新的some_page.css

继续前进!

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

这项工作,包括代码示例,许可下Creative Commons冲锋队3.0许可证。