安装安可
编辑该页面警告:你浏览的文档欧宝官网下载appob娱乐下载Symfony 3.4,不再维护。
读这个页面的更新版本Symfob娱乐下载ony 6.2(当前的稳定版本)。
安装安可
首先,确保你安装node . js还有纱包管理器。下面的说明取决于你是否安装安可在Symfony应用程序。ob娱乐下载
在Symfony应用程序安装安可ob娱乐下载
运行这些命令安装PHP和JavaScript依赖在你的项目:
1 2
美元作曲家需要symfony / weob娱乐下载bpack-encore-bundle美元线安装
如果您使用的是ob娱乐下载Symfony Flex,这将安装和启用WebpackEncoreBundle,创建资产/
目录,添加一个webpack.config.js
文件,并添加node_modules /
来.gitignore
。你可以跳过本文的其余部分,先写下你的JavaScript和CSS通过阅读安可:设置您的项目!
如果你不使用Symfony Flex,您将ob娱乐下载需要创建这些目录和文件指令后自己下一节所示。
在非Symfony应用程序安装安可ob娱乐下载
通过纱线安可安装到您的项目:
1 2 3 4
美元纱添加@symfonob娱乐下载y / webpack-encore - dev#如果你喜欢npm,运行这个命令:美元npm安装@symfonyob娱乐下载 / webpack-encore——save-dev
这个命令创建(或修改)package.json
文件和下载附件node_modules /
目录中。纱线还创建/更新yarn.lock
(称为package-lock.json
如果你使用npm)。
提示
你应该提交package.json
和yarn.lock
(或package-lock.json
如果使用npm)版本控制,但忽视node_modules /
。
创建webpack.config。js文件
接下来,创建一个新的webpack.config.js
项目文件的根源。这是Webpack和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 35 36 37 38 39 40 41 42 43
var安可=需要(“@ob娱乐下载symfony / webpack-encore”);再来一个/ /编译目录资产存储.setOutputPath (“web /构建/”)/ /公共道路使用的web服务器访问输出路径.setPublicPath (/构建的)/ /只需要对CDN或子目录部署/ / .setManifestKeyPrefix(“构建/”)/ * *输入配置* *加1项为每个应用程序的“页面”*(包括一个包含在每一页——如。“应用程序”)* *每个条目将导致一个JavaScript文件(如app.js) *和一个CSS文件(如app.css)如果你的JavaScript进口CSS。* /.addEntry (“应用程序”,”。/资产/ js / app.js”)/ /。addEntry (' page 1 ', '。/资产/ js / page1.js ')/ /。所以page2 addEntry(' ', '。/资产/ js / page2.js ')/ /将需要一个额外的runtime.js脚本标记/ /但是你可能想要这个,除非你建立一个单页面应用程序.cleanupOutputBeforeBuild .enableSingleRuntimeChunk () () .enableSourceMaps (! Encore.isProduction ())/ /使散列文件名(例如app.abc123.css).enableVersioning (Encore.isProduction ())/ /取消如果你使用打印稿/ / .enableTypeScriptLoader ()/ /取消如果你使用Sass / SCSS文件/ / .enableSassLoader ()/ /取消如果你有一个jQuery插件的问题/ / .autoProvidejQuery ();模块. export = Encore.getWebpackConfig ();
接下来,打开新资产/ js / app.js
文件包含一些JavaScript代码和进口一些CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
/ /资产/ js / app.js/ * *欢迎来到你的应用的主要JavaScript文件!* *我们建议包括构建版本的JavaScript文件*(及其CSS文件)在你的基地布局(base.html.twig)。* // /任何CSS导入将输出到一个CSS文件(在本例中app.css)进口“. . / css / app.css”;/ /需要jQuery吗?安装“纱添加jquery”,然后取消导入它。/ /导入从jquery的美元;控制台. log (“你好Webpack安可”);
和新资产/ css / app.css
文件:
1 2 3 4
/ *资产/ css /应用程序。css * /身体{背景颜色:浅灰色;}
您将定制和了解更多关于这些文件安可:设置您的项目。
谨慎
的一些文档将使用特定于S欧宝官网下载appymfony或Symfony的特性ob娱乐下载WebpackEncoreBundle。这些是可选的,是特殊的方式指向安可,使生成的资产路径等功能版本控制和分割的块。