Estoy creando una pequeña aplicación con un cliente JavaScript (se ejecuta en el navegador) y un servidor Node.js, que se comunica mediante WebSocket.

Me gustaría compartir el código entre el cliente y el servidor. Acabo de comenzar con Node.js y mi conocimiento del JavaScript moderno es un poco oxidado, por decir lo menos. Así que todavía estoy entendiendo la función require () de CommonJS. Si estoy creando mis paquetes usando el objeto 'exportar', entonces no puedo ver cómo podría usar los mismos archivos JavaScript en el navegador.

Quiero crear un conjunto de métodos y clases que se utilizan en ambos extremos para facilitar la codificación y decodificación de mensajes y otras tareas duplicadas. Sin embargo, los sistemas de empaquetado Node.js / CommonJS parecen impedirme crear archivos JavaScript que puedan usarse en ambos lados.

También intenté usar JS.Class para obtener un modelo OO más estricto, pero me di por vencido porque no pude descubrir cómo hacer que los archivos JavaScript proporcionados funcionen require (). ¿Hay algo que me estoy perdiendo aquí?

Si desea escribir un módulo que pueda usarse tanto del lado del cliente como del lado del servidor, tengo una breve publicación de blog sobre un método rápido y fácil: Escribir para Node.js y el navegador , esencialmente lo siguiente (donde thises lo mismo que window) :

(function(exports){

    // Your code goes here

   exports.test = function(){
        return 'hello world'
    };

})(typeof exports === 'undefined'? this['mymodule']={}: exports);

Alternativamente, hay algunos proyectos que apuntan a implementar la API Node.js en el lado del cliente, como el gemini de Marak .

También puede estar interesado en DNode , que le permite exponer una función de JavaScript para que se pueda llamar desde otra máquina utilizando un protocolo de red simple basado en JSON.

Epeli tiene una buena solución aquí http://epeli.github.com/piler/ que incluso funciona sin la biblioteca, solo ponga esto en un archivo llamado share.js

(function(exports){

  exports.test = function(){
       return 'This is a function from shared module';
  };

}(typeof exports === 'undefined' ? this.share = {} : exports));

En el lado del servidor simplemente use:

var share = require('./share.js');

share.test();

Y en el lado del cliente, simplemente cargue el archivo js y luego use

share.test();

Verifique el código fuente de jQuery que hace que esto funcione en el patrón del módulo Node.js, el patrón del módulo AMD y global en el navegador:

(function(window){
    var jQuery = 'blah';

    if (typeof module === "object" && module && typeof module.exports === "object") {

        // Expose jQuery as module.exports in loaders that implement the Node
        // module pattern (including browserify). Do not create the global, since
        // the user will be storing it themselves locally, and globals are frowned
        // upon in the Node module world.
        module.exports = jQuery;
    }
    else {
        // Otherwise expose jQuery to the global object as usual
        window.jQuery = window.$ = jQuery;

        // Register as a named AMD module, since jQuery can be concatenated with other
        // files that may use define, but not via a proper concatenation script that
        // understands anonymous AMD modules. A named AMD is safest and most robust
        // way to register. Lowercase jquery is used because AMD module names are
        // derived from file names, and jQuery is normally delivered in a lowercase
        // file name. Do this after creating the global so that if an AMD module wants
        // to call noConflict to hide this version of jQuery, it will work.
        if (typeof define === "function" && define.amd) {
            define("jquery", [], function () { return jQuery; });
        }
    }
})(this)

No olvide que la representación de cadena de una función de JavaScript representa el código fuente de esa función. Simplemente puede escribir sus funciones y constructores de forma encapsulada para que puedan ser toString () 'd y enviados al cliente.

Otra forma de hacerlo es usar un sistema de compilación, colocar el código común en archivos separados y luego incluirlos en los scripts del servidor y del cliente. Estoy usando ese enfoque para un juego simple de cliente / servidor a través de WebSockets donde el servidor y el cliente ejecutan esencialmente el mismo bucle de juego y el cliente se sincroniza con el servidor cada tic para asegurarse de que nadie haga trampa.

Mi sistema de compilación para el juego es un simple script Bash que ejecuta los archivos a través del preprocesador C y luego a través de sed para limpiar algunas hojas basura de cpp, para que pueda usar todo el preprocesador normal como #include, #define, #ifdef etc.

Yo recomendaría mirar en el adaptador de RequireJS para Node.js . El problema es que el patrón de módulo CommonJS que Node.js usa por defecto no es asíncrono, lo que bloquea la carga en el navegador web. RequireJS usa el patrón AMD, que es asíncrono y compatible con el servidor y el cliente, siempre que use el r.jsadaptador.

Tal vez esto no esté totalmente en línea con la pregunta, pero pensé en compartir esto.

Quería hacer un par de funciones de utilidad de cadena simples, declaradas en String.prototype, disponibles tanto para el nodo como para el navegador. Simplemente mantengo estas funciones en un archivo llamado utilities.js (en una subcarpeta) y puedo hacer referencia a ellas fácilmente desde una etiqueta de script en el código de mi navegador y al usar require (omitiendo la extensión .js) en mi script Node.js :

my_node_script.js

var utilities = require('./static/js/utilities')

my_browser_code.html

<script src="/static/js/utilities.js"></script>

Espero que esta información sea útil para alguien que no sea yo.

Si usa paquetes de módulos como webpack para agrupar archivos JavaScript para su uso en un navegador, simplemente puede reutilizar su módulo Node.js para la interfaz que se ejecuta en un navegador. En otras palabras, su módulo Node.js se puede compartir entre Node.js y el navegador.

Por ejemplo, tiene el siguiente código sum.js:

Módulo Node.js normal: sum.js

const sum = (a, b) => {
    return a + b
}

module.exports = sum

Use el módulo en Node.js

const sum = require('path-to-sum.js')
console.log('Sum of 2 and 5: ', sum(2, 5)) // Sum of 2 and 5:  7

Reutilízalo en la interfaz

import sum from 'path-to-sum.js'
console.log('Sum of 2 and 5: ', sum(2, 5)) // Sum of 2 and 5:  7

El servidor simplemente puede enviar archivos fuente de JavaScript al cliente (navegador), pero el truco es que el cliente tendrá que proporcionar un entorno de mini "exportaciones" antes de que pueda exec el código y almacenarlo como un módulo.

Una manera simple de crear un entorno así es usar un cierre. Por ejemplo, supongamos que su servidor proporciona archivos fuente a través de HTTP como http://example.com/js/foo.js. El navegador puede cargar los archivos requeridos a través de XMLHttpRequest y cargar el código de esta manera:

ajaxRequest({
  method: 'GET',
  url: 'http://example.com/js/foo.js',
  onSuccess: function(xhr) {
    var pre = '(function(){var exports={};'
      , post = ';return exports;})()';
    window.fooModule = eval(pre + xhr.responseText + post);
  }
});

La clave es que el cliente puede envolver el código externo en una función anónima que se ejecutará de inmediato (un cierre) que crea el objeto "exportaciones" y lo devuelve para que pueda asignarlo donde desee, en lugar de contaminar el espacio de nombres global. En este ejemplo, se asigna al atributo de ventana fooModuleque contendrá el código exportado por el archivo foo.js.

Ninguna de las soluciones anteriores trae el sistema de módulos CommonJS al navegador.

Como se mencionó en las otras respuestas, existen soluciones de administrador / empaquetador de activos como Browserify o Piler y hay soluciones RPC como dnode o nowjs .

Pero no pude encontrar una implementación de CommonJS para el navegador (incluida una require()función y exports/ module.exportsobjetos, etc.). Entonces escribí el mío, solo para descubrir después que alguien más lo había escrito mejor que yo: https://github.com/weepy/brequire . Se llama Brequire (abreviatura de navegador requiere).

A juzgar por la popularidad, los administradores de activos se ajustan a las necesidades de la mayoría de los desarrolladores. Sin embargo, si necesita una implementación de navegador de CommonJS, Brequire probablemente se ajuste a la factura.

Actualización de 2015: ya no uso Brequire (no se ha actualizado en algunos años). Si solo estoy escribiendo un pequeño módulo de código abierto y quiero que cualquiera pueda usarlo fácilmente, entonces seguiré un patrón similar a la respuesta de Caolan (arriba): escribí una publicación de blog al respecto un par de años hace.

Sin embargo, si estoy escribiendo módulos para uso privado o para una comunidad que está estandarizada en CommonJS (como la comunidad Ampersand ), los escribiré en formato CommonJS y usaré Browserify .

now.js también vale la pena echarle un vistazo. Le permite llamar al lado del servidor desde el lado del cliente, y las funciones del lado del cliente desde el lado del servidor

Si desea escribir su navegador en un estilo similar a Node.js, puede intentar dualify .

No hay compilación de código del navegador, por lo que puede escribir su aplicación sin limitaciones.

Escriba su código como módulos RequireJS y sus pruebas como pruebas de Jasmine .

De esta forma, el código se puede cargar en todas partes con RequireJS y las pruebas se pueden ejecutar en el navegador con jasmine-html y con jasmine-node en Node.js sin la necesidad de modificar el código o las pruebas.

Aquí hay un ejemplo de trabajo para esto.

Caso de uso: comparta la configuración de su aplicación entre Node.js y el navegador (esto es solo una ilustración, probablemente no sea el mejor enfoque dependiendo de su aplicación).

Problema: no puede usar window(no existe en Node.js) niglobal (no existe en el navegador).

Solución:

• Archivo config.js:

  var config = {
    foo: 'bar'
  };
  if (typeof module === 'object') module.exports = config;

• En el navegador (index.html):

  <script src="config.js"></script>
  <script src="myApp.js"></script>

  Ahora puede abrir las herramientas de desarrollo y acceder a la variable global config

• En Node.js (app.js):

  const config = require('./config');
  console.log(config.foo); // Prints 'bar'

• Con Babel o TypeScript:

  import config from './config';
  console.log(config.foo); // Prints 'bar'

Escribí un módulo simple , que puede importarse (ya sea mediante require in Node, o etiquetas de script en el navegador), que puede usar para cargar módulos tanto desde el cliente como desde el servidor.

Ejemplo de uso

1. Definiendo el módulo

Coloque lo siguiente en un archivo log2.js, dentro de su carpeta de archivos web estáticos:

let exports = {};

exports.log2 = function(x) {
    if ( (typeof stdlib) !== 'undefined' )
        return stdlib.math.log(x) / stdlib.math.log(2);

    return Math.log(x) / Math.log(2);
};

return exports;

¡Simple como eso!

2. Usando el módulo

Como es un cargador de módulos bilateral , podemos cargarlo desde ambos lados (cliente y servidor). Por lo tanto, puede hacer lo siguiente, pero no necesita hacer ambas cosas a la vez (y mucho menos en un orden particular):

• En el nodo

En Node, es simple:

var loader = require('./mloader.js');
loader.setRoot('./web');

var logModule = loader.importModuleSync('log2.js');
console.log(logModule.log2(4));

Esto debería volver 2.

Si su archivo no está en el directorio actual de Node, asegúrese de llamar loader.setRootcon la ruta a su carpeta de archivos web estáticos (o donde sea que esté su módulo).

• En el navegador:

Primero, defina la página web:

<html>
    <header>
        <meta charset="utf-8" />
        <title>Module Loader Availability Test</title>

        <script src="mloader.js"></script>
    </header>

    <body>
        <h1>Result</h1>
        <p id="result"><span style="color: #000088">Testing...</span></p>

        <script>
            let mod = loader.importModuleSync('./log2.js', 'log2');

            if ( mod.log2(8) === 3 && loader.importModuleSync('./log2.js', 'log2') === mod )
                document.getElementById('result').innerHTML = "Your browser supports bilateral modules!";

            else
                document.getElementById('result').innerHTML = "Your browser doesn't support bilateral modules.";
        </script>
    </body>
</html>

Asegúrese de no abrir el archivo directamente en su navegador; dado que usa AJAX, le sugiero que eche un vistazo al http.servermódulo de Python 3 (o cualquiera que sea su solución de implementación de servidor web de carpetas, línea de comandos y súper rápida).

Si todo va bien, esto aparecerá:

Escribí esto, es fácil de usar si desea establecer todas las variables en el ámbito global:

(function(vars, global) {
    for (var i in vars) global[i] = vars[i];
})({
    abc: function() {
        ...
    },
    xyz: function() {
        ...
    }
}, typeof exports === "undefined" ? this : exports);