javascript - data - ¿Envoltorio para permitir que un módulo funcione con AMD/CommonJs o etiquetas de script?

require js

Question

Acabo de intentar envolver uno de nuestros módulos que debe incluirse a través de una etiqueta <script> en alguna placa de calderas para permitir la carga opcional de AMD con requirejs.

Fue bastante doloroso y lo mejor que pude encontrar es:

(function(){
var exports, jQuery;
if (typeof window.define === ''function'' && typeof window.requirejs === ''function'') {
    exports     = {};
    define([''jquery''], function (jq) {
        jQuery = jq;
        return thisModule();
    });
} else {
    exports     = window;
    jQuery      = window.jQuery;
    thisModule();
}


function thisModule() {
}

})();

Note que esto es

• Un montón de repetitivo
• Requiere que declare dependencias en variables (solo jQuery en este caso afortunadamente) Y amd
• Necesita aún más código si quiero tener soporte de CommonJs.

Lo que más me preocupa es el segundo punto, ya que este va a ser un poco molesto cuando llegue más allá de envolver nuestros archivos principales. Estoy seguro de que hay algunas implementaciones de envoltorios ordenadas por ahí, pero no puedo encontrar ninguna.

¿Alguien tiene algún consejo?

Answer 1

¿Está intentando hacer esto para un módulo interno o un módulo externo?

Si no necesita módulos adicionales, ¿sería posible construir sus módulos asumiendo AMD, y luego simplemente deshabilitar la función define () en otra parte de su código, si no está allí? Por supuesto, tendrás que usar módulos con nombre, pero básicamente deberías hacerlo de todos modos ...

Si todos sus módulos devuelven sus exportaciones desde la función define (), sería relativamente simple, y su función shimmed define podría verse así:

//Whatever additional guards you want could be added, of course...
if (typeof(window.define) === undefined){
  window.define = function(name, deps, callback){
    window.myNamespace[name] = callback();
  };
}

Al menos de esa manera, no tendría que agregar la placa de calderas a cada módulo ...

Si tiene una biblioteca más grande con muchos submódulos interdependientes, probablemente tendrá que comprometerse a usar Require todo el camino o no, y luego usar su código de envoltura alrededor de toda la biblioteca para manejar el soporte de AMD , la forma en que Jquery y Knockout JS lo hacen.

Answer 2

Cuando intentas recrear algo que ya existe, hice exactamente lo mismo, encontrando una solución ligeramente diferente en mi pregunta de .

Para resumir, el nombre que necesita saber es "Definición de módulo universal" y hay un GitHub ubicado en https://github.com/umdjs/umd con una variedad de implementaciones diferentes.

Answer 3

Después de piratear esto, logré encontrar lo siguiente, que parece significativamente mejor e incluso se podría incluir como un calzo en una etiqueta de script normal:

Un par de notas y desventajas.

• Debe reemplazar cualquier configuración explícita en el objeto de ventana con el objeto de exportaciones
• Se supone que cualquier dependencia existe como una propiedad con un nombre similar en el objeto de la ventana (aunque también se asegura de colocar esa propiedad allí). En general, esto es lo suficientemente seguro en mi caso, pero usted podría piratear fácilmente algo como la configuración de las rutas requeridas.
• En realidad no estoy convencido de que todo el concepto de exportaciones sea particularmente necesario, o al menos no necesario en todos los casos.

(function () {
    var define, exports = {};
    if (window.define && window.define.amd) {
        define = window.define;
    } else {
        exports = window;
        define = function (name, dependencies, fn) {
            var deps = [];
            for (var i = 0; i < dependencies.length; i++)
                deps.push(window[dependencies[i]]);
            var module = fn.apply(undefined, deps);
            if (!window[name]) window[name] = module;
        };
    }

    define(''mylib.interaction'', [''jQuery'', ''mylib.core'', ''jQuery.UI''], function($, mylib) {
        return /*....blah...*/;
    })
})()