Pregunta JavaScript require () en el lado del cliente


¿Es posible usar require() (o algo similar) en el lado del cliente?

Ejemplo

var myClass = require('./js/myclass.js');

75
2018-03-02 13:59


origen


Respuestas:


Deberías mirar dentro require.js o head.js para esto.


40
2018-03-02 14:01



He estado usando Navegar para eso. También me permite integrar módulos Node.js en mi código del lado del cliente.

Blogé sobre esto aquí: Agregue node.js / CommonJS style require () al lado del cliente JavaScript con browserify


20
2017-08-05 14:19



Me hice las mismas preguntas. Cuando lo analicé, encontré las opciones abrumadoras.

Afortunadamente encontré esta excelente hoja de cálculo que te ayuda a elegir el mejor cargador según tus requisitos:

https://spreadsheets.google.com/lv?key=tDcrcr9wNQRCNCRCflWxhYQ


11
2017-08-05 15:11



Si quieres tener el estilo Node.js require puedes usar algo como esto:

var require = (function () {
    var cache = {};
    function loadScript(url) {
        var xhr = new XMLHttpRequest(),
            fnBody;
        xhr.open('get', url, false);
        xhr.send();
        if (xhr.status === 200 && xhr.getResponseHeader('Content-Type') === 'application/x-javascript') {
            fnBody = 'var exports = {};\n' + xhr.responseText + '\nreturn exports;';
            cache[url] = (new Function(fnBody)).call({});
        }
    }
    function resolve(module) {
        //TODO resolve urls
        return module;
    }
    function require(module) {
        var url = resolve(module);
        if (!Object.prototype.hasOwnProperty.call(cache, url)) {
            loadScript(url);
        }
        return cache[url];
    }
    require.cache = cache;
    require.resolve = resolve;
    return require;
}());

Cuidado: este código funciona, pero está incompleto (especialmente la resolución de URL) y no implementa todas las características de Node.js (simplemente lo armé anoche). NO DEBE UTILIZAR ESTE CÓDIGO en aplicaciones reales, pero te da un punto de partida. Lo probé con este sencillo módulo y funciona:

function hello() {
    console.log('Hello world!');
}

exports.hello = hello;

11
2017-12-16 15:32



Echa un vistazo a requirejs proyecto.


9
2018-03-02 14:02



He descubierto que, en general, se recomienda preprocesar los scripts en tiempo de compilación y agruparlos en uno (o muy pocos) paquetes con el require siendo reescrito para algunos "shim ligero" también en tiempo de compilación.

Busqué en Google las "nuevas" herramientas que deberían poder hacerlo

Y lo ya mencionado browserify también debería caber bastante bien - http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/

¿De qué tratan los sistemas de módulos?


7
2018-04-23 05:57



Puede crear elementos en el DOM, que carga elementos.

Como tal:

var myScript = document.createElement('script'); // Create new script element
myScript.type = 'text/javascript'; // Set appropriate type
myScript.src = './js/myclass.js'; // Load javascript file

3
2018-03-02 14:02



Simplemente use Browserify, que es algo así como un compilador que procesa sus archivos antes de que entren en producción y los empaqueta en paquetes.

Creo que tiene un archivo main.js que requiere los archivos de su proyecto, cuando ejecuta browserify en él, simplemente procesa todo y crea un paquete con todos sus archivos, lo que permite el uso del archivo. require llama sincrónicamente en el navegador sin solicitudes HTTP y con muy poca sobrecarga para el rendimiento y para el tamaño del paquete, por ejemplo.

Ver el enlace para más información: http://browserify.org/


3
2018-02-01 17:33



Algunas respuestas ya, pero me gustaría señalarte a YUI3 y su carga de módulos bajo demanda. Funciona tanto en el servidor (node.js) como en el cliente: tengo un sitio web de demostración que utiliza exactamente el mismo código JS que se ejecuta en el cliente o servidor para compilar las páginas, pero ese es otro tema.

YUI3: http://developer.yahoo.com/yui/3/

Videos: http://developer.yahoo.com/yui/theater/

Ejemplo:

(condición previa: las funciones básicas YUI3 en 7k yui.js se han cargado)

YUI({
    //configuration for the loader
}).use('node','io','own-app-module1', function (Y) {
    //sandboxed application code
    //...

    //If you already have a "Y" instance you can use that instead
    //of creating a new (sandbox) Y:
    //  Y.use('moduleX','moduleY', function (Y) {
    //  });
    //difference to YUI().use(): uses the existing "Y"-sandbox
}

Este código carga los módulos YUI3 "nodo" y "io", y el módulo "own-app-module1", y luego se ejecuta la función de devolución de llamada. Se crea un nuevo entorno limitado "Y" con todas las funciones YUI3 y own-app-module1. Nada aparece en el espacio de nombres global. La carga de los módulos (archivos .js) es manejada por el cargador YUI3. También utiliza la configuración (opcional, no se muestra aquí) para seleccionar una versión -debug o -min (ified) de los módulos a cargar.


2
2018-03-02 14:10