05 ‐ Gérer les assets

Où et comment sont appelés les fichiers JS et CSS sur BFF ?

Sur BFF, nous avons un service /inc/Services/Assets.php pour la mise en file d'attente des scripts et des styles destinés à apparaître en front-end à travers entre autre le hook wp_enqueue_scripts.

/**
 * Add hooks for the scripts and styles to hook on
 */
add_action( 'wp', [ $this, 'register_assets' ] );
add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_styles' ] );
add_filter( 'stylesheet_uri', [ $this, 'stylesheet_uri' ] );
add_filter( 'wp_login_page_theme_css', [ $this, 'login_stylesheet_uri' ] );

Note

wp_enqueue_scripts est le hook approprié pour la mise en file d'attente des scripts et des styles destinés à apparaître en front-end. Malgré son nom, il est utilisé pour la mise en file d'attente des scripts et des styles.

Tout d'abord, les styles et scripts sont enregistrés dans la fonction register_assets :

/**
 * Register all the Theme assets
 */
public function register_assets(): void {
	if ( is_admin() ) {
		return;
	}
	$theme = wp_get_theme();

	// Do not add a versioning query param in assets URLs if minified
	$version = $this->is_minified() ? null : $theme->get( 'Version' );

	// Js
	$file       = $this->is_minified() ? $this->get_min_file( 'js' ) : 'app.js';
	$asset_data = $this->get_asset_data( $file );
	$this->assets_tools->register_script(
		'scripts',
		'dist/' . $file,
		array_merge( [ 'jquery' ], $asset_data['dependencies'] ), // ensure jQuery dependency is set even if not declared explicitly in the JS
		$asset_data['version'],
		[ 'strategy' => 'defer' ]
	);

	wp_add_inline_script(
		'scripts',
		'const THEME_DATA = ' . wp_json_encode(
			[
				'themeUri' => get_template_directory_uri(),
			]
		),
	);

	// CSS
	wp_register_style( 'theme-style', get_stylesheet_uri(), [], $version );
}

Ils sont ensuite "enqueue" à travers leur fonction respective.

/**
 * Enqueue the scripts
 */
public function enqueue_scripts(): void {
	// JS
	$this->assets_tools->enqueue_script( 'scripts' );
}

/**
 * Enqueue the styles
 */
public function enqueue_styles(): void {
	// CSS
	$this->assets_tools->enqueue_style( 'theme-style' );
}

Caution

Le style CSS nommé theme-style fait référence au fichier style.css situé à la racine du thème et n'est pas utilisé pour y afficher du style à proprement parler mais pour avoir des données du thème nécéssaire pour WordPress. Le véritable fichier CSS principal utilisé est enqueue dans la fonction stylesheet_uri.

/**
 * The stylesheet uri based on the dev or not constant
 *
 * @param string $stylesheet_uri
 *
 * @return string
 * @author Nicolas Juen
 */
public function stylesheet_uri( string $stylesheet_uri ): string {
	if ( $this->is_minified() ) {
		$file = $this->get_min_file( 'css' );
		if ( ! empty( $file ) && file_exists( \get_theme_file_path( '/dist/' . $file ) ) ) {
			return \get_theme_file_uri( '/dist/' . $file );
		}
	}

	if ( file_exists( \get_theme_file_path( '/dist/app.css' ) ) ) {
		return \get_theme_file_uri( '/dist/app.css' );
	}

	return $stylesheet_uri;
}

La constante SCRIPT_DEBUG

Lorsque vous être en environnement de développement, assurez-vous de définir la constante PHP SCRIPT_DEBUG à true afin d'utiliser les bons fichiers CSS et JS générés par Webpack avec la commande yarn start.

À contrario, si vous êtes en environnement de production, assurez-vous que la constante SCRIPT_DEBUG ne soit pas définie ou qu'elle ait la valeur à false.

Note

Cela est normalement déjà bien géré sur l'ensemble des projets mais si vous avez des difficultés à charger vos fichiers, le problème peut venir de là.

Dans le service /inc/Services/Assets.php, nous avons une fonction qui fait cette vérification.

/**
 * Check if we are on minified environment.
 *
 * @return bool
 * @author Nicolas JUEN
 */
public function is_minified(): bool {
	return ( ! defined( 'SCRIPT_DEBUG' ) || SCRIPT_DEBUG === false );
}