安可:设置您的项目
编辑该页面安可:设置您的项目
后安装安可,你的应用程序已经有了几个文件,组织成一个资产/
目录:
资产/ 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用ob娱乐下载户体验。
配置安可/ Webpack
安可的一切都是通过一个配置webpack.config.js
项目文件的根源。它已经拥有你所需要的基本配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/ / webpack.config.js常量安可=需要(“@ob娱乐下载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你不会有ob娱乐下载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用ob娱乐下载户体验
像上面的例子是一样简单,而不是构建您的应用程序的内部app.js
,我们建议刺激:一个JavaScript框架,让用户可以更方便的行为附加到HTML。这是强大的,你会喜欢的!ob娱乐下载甚至Symfony提供了包添加更多特性刺激。这些被称为Symfony的UX包。ob娱乐下载
如果你随后的安装指导,你应该已经安装了刺激和准备好了!事实上,的目的资产/ 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
- 找到更多关于如何ob娱乐下载Symfony UX系统的工作原理
- 看到一个所有Symfony UXob娱乐下载包的列表
了解更多的ob娱乐下载Symfony刺激桥——包括控制器负载懒洋洋地的超级大国!
截屏视频
或检查刺激视频Symob娱乐下载fonyCasts。
涡轮:闪电快速单页面程序经验
ob娱乐下载Symfony提供了与另一个JavaScript库称为紧密集成涡轮增压。涡轮增压自动转换所有链接的点击和表单提交到一个Ajax调用,为零(或几乎为零)Symfony代码更改!ob娱乐下载结果呢?你得到一个单页面应用程序的速度,而无需编写任何JavaScript。
要了解更多,请查看ob娱乐下载symfony / ux-turbo包中。
截屏视频
或检查涡轮视频Symob娱乐下载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文件。或者,回到前端的文章列表。