Je viens de configurer Webpack dans un thème WordPress.
Le thème utilise Bootstrap, et à cet égard, le bootstrap.min.js a été précédemment chargé comme ceci:
wp_enqueue_script( 'bootstrapjs', get_stylesheet_directory_uri() . '/assets/js/bootstrap.min.js', array( 'jquery' ) );
WordPress a jQuery y est intégré, donc en spécifiant jquery comme dépendance, cela fonctionne et tout le monde est heureux.
Cependant, j'essaye maintenant d'utiliser Webpack. Je m'y habitue encore, et j'ai eu l'impression que c'est un bon style de compiler autant de scripts en un seul, pour limiter la demande que le serveur doit faire pour obtenir toutes les ressources.
Donc je suis déchiré ... Dois-je
SOLUTION 1) Ne pas compiler Bootstrap.min.js en utilisant Webpack .
... Et mettez simplement ce fichier directement dans le dossier assets et mettez-le en file d'attente (en contournant complètement Webpack).
À l'envers: Je peux simplement utiliser jQuery de WordPress, ce qui n'a pas besoin d'être chargé deux fois (ce qui pourrait également causer des problèmes).
Inconvénient: Structure de fichiers encombrée, car certains fichiers sont chargés via Webpack et d'autres non. Cela entraînera également un nombre plus élevé de fichiers (plus de requêtes serveur).
SOLUTION 2) Compilez Bootstrap.min.js en utilisant Webpack . Cela m'oblige à importer jquery et popper , donc je peux avoir besoin du fichier Bootstrap.min.js sans obtenir d'erreur.
Upside: meilleure structure de fichiers et moins de fichiers que le serveur doit demander.
Inconvénient: Jquery doit être chargé deux fois (ce qui peut être un désordre). Et cela peut également entraîner des fichiers de plus grande taille.
3 Réponses :
Je viens de réaliser que je peux simplement désenregistrer jQuery en utilisant ceci:
function custom_head_cleanup(){
if( ! is_admin() ){
wp_deregister_script( 'jquery' );
}
}
add_action( 'init', 'custom_head_cleanup' );
Je suppose que j'utilise ensuite la solution 2.
hmm donc vous incluez jquery dans votre package json puis importez 'jquery'? Comment puis-je conserver jquery dans mon package json et jquery dans webpack dans la même version?
juste aux prises avec le même problème. Première utilisation de votre solution 2. Malheureusement, quelques plugins, qui dépendent de jquery cassé. Donc pour moi fonctionne ce qui suit.
exclure jQuery des fichiers du bundle via des externes dans webpack.config module.exports = {
externals: {
jquery: 'jQuery'
}
};
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
Utilisez la nouvelle version de jQuery via désenregistrement et enregistrez jQuery dans functions.php
Une autre solution pratique consiste à utiliser le plugin @ wordpress / dependency-extraction-webpack-plugin. Vous pouvez le charger en tant que plugin webpack et il détectera automatiquement plusieurs dépendances pouvant être incluses dans l'installation de Wordpress (jQuery, React, entre autres).
$script_path = plugin_dir_path(__FILE__ ) . 'dist/main.js';
$script_asset_path = plugin_dir_path(__FILE__ ) . 'dist/main.asset.php';
$script_asset = file_exists( $script_asset_path )
? require( $script_asset_path )
: array( 'dependencies' => array(), 'version' => filemtime( $script_path ) );
$script_url = plugin_dir_url(__FILE__ ) . 'dist/main.js';
wp_enqueue_script( 'app', $script_url, $script_asset['dependencies'], $script_asset['version'], false );
Un avantage supplémentaire est qu'il produira un tableau php contenant les dépendances et la somme de contrôle du fichier de script. Vous pouvez l'utiliser plus tard pour alimenter la fonction wp_enqueue_script.
const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin')
// ...
plugins: [
new DependencyExtractionWebpackPlugin()
]
J'ai trouvé que c'était le meilleur moyen d'inclure un composant React dans une façade Wordpress et bien sûr fonctionne aussi pour jQuery.