安装安可
编辑该页面警告:你浏览的文档欧宝体育电话欧宝娱乐app下载地址Symfony 4.4,不再维护。
读这个页面的更新版本Symf欧宝娱乐app下载地址ony 6.2(当前的稳定版本)。
安装安可
首先,确保你安装node . js。选择你也可以安装纱包管理器。在接下来的几节中,您将看到这两个命令npm和纱,但你只需要运行一个。
下面的说明取决于你是否安装安可在Symfony应用程序。欧宝娱乐app下载地址
在Symfony应用程序安装安可欧宝娱乐app下载地址
运行这些命令安装PHP和JavaScript依赖在你的项目:
1 2 3 4 5 6 7
美元作曲家需要symfony / we欧宝娱乐app下载地址bpack-encore-bundle#如果你用纱包管理器美元线安装#如果你使用npm包管理器美元npm安装如果您使用的是欧宝娱乐app下载地址Symfony Flex,这将安装和启用WebpackEncoreBundle,创建资产/目录,添加一个webpack.config.js文件,并添加node_modules /来.gitignore。你可以跳过本文的其余部分,先写下你的JavaScript和CSS通过阅读安可:设置您的项目!
如果你不使用Symfony Flex,您将欧宝娱乐app下载地址需要创建这些目录和文件指令后自己下一节所示。
在非Symfony应用程序安装安可欧宝娱乐app下载地址
通过纱线安可安装到您的项目:
1 2 3 4 5
#如果你用纱包管理器美元纱添加@symfon欧宝娱乐app下载地址y / webpack-encore - dev#如果你使用npm包管理器美元npm安装@symfony欧宝娱乐app下载地址 / 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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
var安可=需要(“@欧宝娱乐app下载地址symfony / webpack-encore”);/ /手动配置运行时环境如果没有已经配置的“安可”命令。/ /这是依靠webpack.config有用,当你使用工具。js文件。如果(! Encore.isRuntimeEnvironmentConfigured ()) {Encore.configureRuntimeEnvironment (process.env。NODE_ENV | |“开发”);}安可/ /编译目录资产存储.setOutputPath (“公共/构建/”)/ /公共道路使用的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 ')/ /启用时,Webpack“分裂”你的文件成小块更大的优化。.splitEntryChunks ()/ /将需要一个额外的runtime.js脚本标记/ /但是你可能想要这个,除非你建立一个单页面应用程序.enableSingleRuntimeChunk ()* * / * *特性配置启用和配置下面的其他特性。完整的*功能列表,请参阅:* //www.oldmanjams.com/doc/current欧宝娱乐app下载地址/frontend.html添加更多特性* /.enableBuildNotifications .cleanupOutputBeforeBuild () () .enableSourceMaps (! Encore.isProduction ())/ /使散列文件名(例如app.abc123.css).enableVersioning (Encore.isProduction ())/ /使@babel / preset-env polyfills.configureBabelPresetEnv ((配置)= >{配置。useBuiltIns =“使用”;配置。corejs =3;})/ /允许Sass / SCSS支持/ / .enableSassLoader ()/ /取消如果你使用打印稿/ / .enableTypeScriptLoader ()/ /取消获得完整性= "…"属性脚本标签和链接/ /需要WebpackEncoreBundle 1.4或更高/ / .enableIntegrityHashes (Encore.isProduction ())/ /取消如果你有一个jQuery插件的问题/ / .autoProvidejQuery ()/ /取消如果你使用API平台管理(需要api-admin作曲家)/ / .enableReactPreset ()/ /。addEntry('管理','。/资产/ js / admin.js ');模块. 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”(或“npm安装jquery”),然后取消导入它。/ /导入从jquery的美元;控制台. log (“你好Webpack安可!编辑我的资产/ js / app.js ');和新资产/ css / app.css文件:
1 2 3 4
/ *资产/ css /应用程序。css * /身体{背景颜色:浅灰色;}您将定制,了解更多关于这些文件安可:设置您的项目。
谨慎
的一些文档将使用特定于S欧宝体育电话ymfony或Symfony的特性欧宝娱乐app下载地址WebpackEncoreBundle。这些是可选的,是特殊的方式指向安可,使生成的资产路径等功能版本控制和分割的块。
