web-dev-qa-db-fra.com

require.js pour charger javascript

bien que wp_enqueue_script semble fonctionner, ce n'est pas vraiment élégant. Je suis en train de créer un WP front-end qui utilise MVC (backbone.js) et a littéralement plus de 30 scripts séparés Modèle/Vue/Collection/Contrôleur et que je continue à ajouter au nombre. J'ai utilisé require.js beaucoup avant et je l'aime beaucoup, mais il semble complètement rompre avec la logique des wordpress.

Est-ce que n'importe qui peut m'indiquer une méthode propre d'employer un scriptloader de js avec wordpress? ou est-ce une tâche sans espoir?

Merci

javascriptwp-enqueue-scriptmvc
3
Alex

Bien que WordPress dispose déjà d'une API .js de base (avec les scripts register et en file d'attente), je ne vois pas pourquoi vous ne pouvez pas l'utiliser conjointement avec require.js, du moins au niveau modulaire.

D'après ce que je peux dire (jamais utilisé), il suffit de le charger pour que vous puissiez,

wp_enqueue_script( 
     $handle, 
     '...folder../require.js',
      $deps,
      $ver,
      $in_footer 
);

Utilisez ensuite la structure de dossiers et le code js recommandés pour en tirer parti. Je pense que require.js est agnostique par rapport au framework, même s'il a sa propre fonction d'espace de noms pour éviter les conflits.

Cela dit, vous ne pourrez toujours vous en servir que pour votre propre code, par opposition aux plug-ins et aux thèmes que vous utilisez peut-être.

Cela signifie que si un auteur de plugin ou de thème le fait correctement, vous pouvez wp_dequeue_script le script et le gérer avec require.js, mais que se passe-t-il s'ils ne le font pas? Il n'y a pas grand chose que vous puissiez faire en dehors d'écrire une sorte de plugin hacky ou de changer manuellement le code.

Pour cette raison, utiliser un framework js avec wordpress ne vaut probablement pas la peine, sauf si vous le faites à partir de zéro et que vous avez le contrôle sur les plugins et les thèmes.

1
Wyck

Pour utiliser nécessite JS vous avez besoin d'ajouter dans la tête

<!-- Delayed execution of inline jQuery scripts with ready waiting event -->
<script type="text/javascript">(function(w, d, u){w.readyQ = []; w.bindReadyQ = []; function p(x, y){if (x == "ready"){w.bindReadyQ.Push(y); } else{w.readyQ.Push(x); }}; var a = {ready:p, bind:p}; w.$ = w.jQuery = function(f){if (f === d || f === u){return a} else{p(f)}}})(window, document)</script>

<!-- Loading require.js -->
<script async data-main="/wp-content/theme/default/js/requirejs.config" src="/wp-content/theme/default/js/requirejs.min.js"></script>

Ensuite, créez le fichier de configuration Require.JS et mettez à jour functions.php

/* Delayed loading of all JS files */
add_filter('script_loader_tag', function($tag, $handle, $src) {
    if (isAdmin()) return $tag;

    if (stripos($src, 'jquery.min') !== FALSE) return '';

    global $wp_scripts;
    $dependencies = $wp_scripts->query($handle, 'registered')->deps;
    $dependenciesList = empty($dependencies) ? "'jquery'" : "'" . implode("','", $wp_scripts->query($handle, 'registered')->deps) . "'";

    return "<script>$(document).ready(function(){ define('{$handle}', [{$dependenciesList}], function(){require(['{$src}']);}); require(['{$handle}']); });</script>\n";
}, 10, 3);

Et pour finir, vous avez besoin d’ajouter dans votre fichier de configuration l’initialisation des événements jquery retardés, comme ceci:

requirejs.config({
    paths: {
        jquery: 'jquery.min'
    }
});

//loading jquery as dependency
require(["jquery"], function ($) {
    (function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document);
});
0
akazakou