README

此包允许您通过读取 entrypoints.json 文件并帮助您渲染所有所需的动态 script 和 link 标签来使用 Webpack Encore 的 splitEntryChunks() 功能。

灵感来源于 symfony/webpack-encore-bundle

安装

安装 68publishers/webpack-encore-bundle 的最佳方式是使用 Composer

$ composer require 68publishers/webpack-encore-bundle

此包需要与 symfony/asset 集成。我们推荐使用我们的包 68publishers/asset，但您也可以使用自己的集成。

配置

首先，在 DIC 中注册一个编译器扩展

extensions:
	encore: SixtyEightPublishers\WebpackEncoreBundle\Bridge\Nette\DI\WebpackEncoreBundleExtension

最小配置

encore:
	# The path where Encore is building the assets - i.e. Encore.setOutputPath()
	output_path: %wwwDir%/public/build

您还必须设置 Asset 组件的清单路径。如果您使用 68publishers/asset，配置可能如下所示

asset:
	json_manifest_path: %wwwDir%/public/build/manifest.json

多个构建

encore:
	output_path: null # or just omit this option
	builds:
		frontend: %wwwDir%/public/frontend/build
		another: %wwwDir%/public/another/build

默认属性

encore:
	# if using Encore.enableIntegrityHashes() and need the crossorigin attribute. Allowed values are NULL, 'anonymous' or 'use-credentials'. Default is NULL.
	crossorigin: anonymous

	# Set attributes that will be rendered on all script tags
	script_attributes:
		defer: yes
		referrerpolicy: origin

	# Set attributes that will be rendered on all link tags
	link_attributes:
		referrerpolicy: origin

HTTP 预加载

如果启用此选项，所有脚本和样式将通过 HTTP2 头部 Link 进行预加载。

encore:
	preload: yes

Entrypoints.json 缓存

可以缓存 entrypoints.json 文件的解析内容以提高加载速度。要使用此功能，应用程序必须集成 symfony/console，因为缓存必须通过控制台命令手动创建。

encore:
	cache: yes # you can use %debugMode%

要生成缓存，请运行以下命令

$ bin/console encore:warmup-cache

缓存文件将生成为 %wwwDir%//cache/webpack_encore.cache.php。

❗ 当 entrypoints.json 发生变化时，必须重新生成缓存。仅在生产环境中使用此选项，并在应用程序构建过程中运行该命令。

严格模式

默认情况下，如果我们想为在 entrypoints.json 中未定义的入口渲染标签，应用程序将抛出 EntryPointNotFoundException 异常。您可以禁用此行为

encore:
	strict_mode: no

在 Latte 模板中使用

脚本和链接标签应使用宏 encore_js 和 encore_css 渲染

{*
    {encore_js string $entryName, ?string $packageName, ?string $entrypointName, array $extraAttributes = []}
    {encore_css string $entryName, ?string $packageName, ?string $entrypointName, array $extraAttributes = []}
*}

{block js}
    {include parent}

    {encore_js 'entry1'}
    {* if you are using multiple builds *}
    {encore_js, 'entry1', null, 'frontend'}
    {* if you want to pass extra attributes *}
    {encore_js 'entry1' null, null, ['async' => true]}
{/block}

{block stylesheets}
    {include parent}

    {encore_css 'entry1'}
    {* if you are using multiple builds *}
    {encore_css, 'entry1', null, 'frontend'}
    {* if you want to pass extra attributes *}
    {encore_css 'entry1' null, null, ['hreflang' => 'en']}
{/block}

如果出于某些原因需要手动访问单个文件名，可以使用以下 Latte 函数

{*
    {encore_js_files(string $entryName, ?string $entrypointName): array}
    {encore_css_files(string $entryName, ?string $entrypointName): array}
    {encore_entry_exists(string $entryName, ?string $entrypointName): bool}
*}

{foreach encore_js_files('entry1') as $file}
    {var $asset = asset($file)}
{/foreach}

{foreach encore_css_files('entry1') as $file}
    {var $asset = asset($file)}
{/foreach}

{* Render tags for entry `entry2` only if the entry exists (prevents an exception throwing in a strict mode) *}
{if encore_entry_exists('entry2')}
    {encore_js 'entry2'}
{/if}

事件

如果您的应用程序集成了 symfony/event-dispatcher，您可以在生成脚本或链接标签时处理 RenderAssetTagEvent 事件。

namespace App\EventSubscriber;

use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use SixtyEightPublishers\WebpackEncoreBundle\Event\RenderAssetTagEvent;

final class ScriptNonceSubscriber implements EventSubscriberInterface
{
    public static function getSubscribedEvents()
    {
        return [
            RenderAssetTagEvent::class => 'onRenderAssetTag',
        ];
    }

    public function onRenderAssetTag(RenderAssetTagEvent $event): void
    {
        if ($event->isScriptTag()) {
            $event->setAttribute('nonce', 'lookup nonce');
        }
    }
}

贡献

在打开拉取请求之前，请使用以下命令检查您的更改

$ make init # to pull and start all docker images

$ make cs.check
$ make stan
$ make tests.all