搜索Algolia

第一个例子

编辑该页面

警告:你浏览的文档欧宝体育电话欧宝娱乐app下载地址Symfony 4.0,不再维护。

读这个页面的更新版本Symf欧宝娱乐app下载地址ony 6.2(当前的稳定版本)。

资产/目录:

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

再来一次,你应该想的CSS依赖你的JavaScript。这意味着,你将需要无论你需要从内部JavaScript: CSS

1 2 3 4
/ /资产/ js / app.js需要(“. . / css / app.css”);/ /……其他的JavaScript代码

再来一次,我们可以很容易地贬低这些文件中,预处理app.css通过PostCSS和很多更多。

webpack.config.js您的项目的根源。内部,使用安可来帮助生成Webpack配置。

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日27 28 29 30 31 32 33 34
/ / webpack.config.jsvar安可=需要(“@欧宝娱乐app下载地址symfony / webpack-encore”);再来一个/ /项目目录将存储所有编译的资产.setOutputPath (“公共/构建/”)/ /公共道路使用的web服务器访问以前的目录.setPublicPath (/构建的)/ /将创建公共/构建/应用程序。js和公共/构建/ app.css.addEntry (“应用程序”,”。/资产/ js / app.js”)/ /允许遗留应用程序使用美元/ jQuery作为一个全局变量.autoProvidejQuery ()/ /启用源地图在开发过程中.enableSourceMaps (! Encore.isProduction ())/ /清空outputPath dir每个构建之前.cleanupOutputBeforeBuild ()/ /构建完成时显示操作系统通知/失败.enableBuildNotifications ()/ /创建散列文件名(例如app.abc123.css)/ / .enableVersioning ()/ /允许sass / scss文件要处理/ / .enableSassLoader ();/ /导出最终配置模块. export = Encore.getWebpackConfig ();

这已经是一个丰富的设置:它输出2文件,使源地图来帮助调试。

建立资产,使用再来一个可执行:

1 2 3 4 5 6 7 8 9 10 11 12 13
#编译资产一旦美元/ node_modules /。bin /安可dev#文件改变时自动重新编译的资产美元/ node_modules /。bin /安可dev--watch#编译资产,但也贬低&优化它们美元/ node_modules /。bin /安可生产#短版本以上3命令美元纱线运行安可dev美元纱线运行安可dev -手表美元纱安可生产运行

请注意

重新运行再来一个每次你更新webpack.config.js文件。

运行一个命令后,您现在可以添加脚本和链接(如新标签,编制资产。/构建/ app.css和/构建/ app.js)。在Sy欧宝娱乐app下载地址mfony,使用资产()助手:

1 2 3 4 5 6 7 8 9 10 11 12
{# base.html。树枝#}< ! DOCTYPEhtml><html><头>< !——……- - ><链接rel=“样式表”href=”{{资产(“构建/ app.css”)}}”>< /头><身体>< !——……- - ><脚本src=”{{资产(“构建/ app.js”)}}”>< /脚本>< /身体>< /html>

app.css文件.sass或.scss(基于您想要使用的语法):

1 2 3
/ /资产/ js / app.js——需要(“. . / css / app.css”);+需要(“. . / css / app.scss”);

并使预处理程序Sass:

1 2 3 4 5 6 7
/ / webpack.config.js再来一个/ /……/ /允许sass / scss文件要处理- / / .enableSassLoader ()+ .enableSassLoader ()

使用enableSassLoader ()需要安装额外的包,但是安可会告诉你完全哪些在运行它。

需要其他的JavaScript文件。首先,创建一个文件,出口一个函数:

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

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

1
美元纱添加jquery开发

太棒了!使用要求()进口jquery和greet.js:

1 2 3 4 5 6 7 8 9 10 11 12
/ /资产/ js / app.js/ /加载jquery node_modules寄来的包裹常量$ =需要(jquery的);/ /导入函数从问候。js (js扩展是可选的)/ /。/(. . /)意味着寻找一个本地文件var迎接=需要(”。/问候');$ (文档时(函数(){$ (“身体”).prepend (“< h1 >”+问候(“约翰。”)+“< / h1 >”);});

就是这样!当你建立你的资产,jQuery和greet.js将自动添加到输出文件(app.js)。jQuery等公共库,您可能希望这样创建一个共享条目获得更好的性能。

1 2 3 4 5 6
再来一个/ /…….addEntry (“主页”,”。/资产/ js / homepage.js”).addEntry (“博客”,”。/资产/ js / blog.js”).addEntry (“存储”,”。/资产/ js / store.js”);

如果这些条目包括CSS / Sass文件(如。homepage.js需要资产/ css / homepage.scss),为每个:将生成两个文件(如构建/ homepage.js和构建/ homepage.css)。

安可的文章列表了解更多并添加新功能。

这项工作,包括代码示例,许可下Creative Commons冲锋队3.0许可证。
欧宝娱乐app下载地址Symfony代码性能”>< /a> <p class=欧宝娱乐app下载地址Symfony代码性能

检查代码的性能在开发、测试、分期和生产”>< /a> <p class=检查代码的性能在开发、测试、分期和生产

阅读我们完整的Symfony和PHP目录欧宝娱乐app下载地址为您的web开发需要的解决方案。”>< /a> <p class=阅读我们完整的Symfony和PHP目录欧宝娱乐app下载地址为您的web开发需要的解决方案。