require.js para cargar javascript

3

mientras wp_enqueue_script parece funcionar, no es realmente elegante. Actualmente estoy creando una interfaz WP que usa MVC (backbone.js) y tiene más de 30 scripts separados de Modelo / Vista / Colección / Controlador y sigo agregando números. He usado require.js mucho antes y me gusta mucho, sin embargo, parece romper completamente la lógica de los wordpresses.

¿Puede alguien indicarme un método limpio para usar un cargador de scripts js con wordpress? ¿O es esta una tarea sin esperanza?

Gracias

    
pregunta Alex 28.04.2012 - 16:52

2 respuestas

1

Aunque WordPress ya tiene una API .js básica (con registro y secuencia de comandos de puesta en cola), no veo por qué no puede usarla junto con require.js, al menos a nivel modular.

Por lo que puedo decir (nunca lo usé) solo se necesita cargar, para que puedas,

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

Luego use la estructura de carpetas requerida y el código js recomendados para aprovecharla. Creo que require.js es independiente del marco, incluso así tiene su propia función de espacio de nombres para evitar conflictos.

Dicho esto, estarás limitado a usarlo para tu propio código en lugar de los complementos y temas que podrías estar usando.

Es decir, si un autor de plugins o temas lo hace de la manera correcta, puede wp_dequeue_script el script y administrarlo con require.js, pero ¿y si no lo hacen? No hay mucho que puedas hacer fuera escribiendo algún tipo de complemento hacky o cambiando manualmente el código.

Por esta razón, el uso de un framework js con wordpress probablemente no valga la pena, a menos que lo hagas desde cero y tengas control sobre los complementos y temas.

    
respondido por el Wyck 28.04.2012 - 17:53
0

Para usar require JS necesitas agregar in head

<!-- 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>

A continuación, cree el archivo de configuración Require.JS y actualice 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);

Y en el final, necesita en su archivo de configuración, agregue la inicialización de los eventos jquery retrasados, como esto:

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);
});
    
respondido por el akazakou 26.08.2015 - 15:30

Lea otras preguntas en las etiquetas