Browserify - Cómo llamar a la función incluida en un archivo generado a través de browserify en el navegador

La parte clave de agrupar módulos independientes con Browserify es la opción --s. Expone todo lo que exportas desde tu módulo usando el nodo module.exports como una variable global. El archivo se puede incluir en una etiqueta <script>.

Solo necesita hacer esto si por alguna razón necesita que la variable global sea expuesta. En mi caso, el cliente necesitaba un módulo independiente que pudiera incluirse en las páginas web sin que tuvieran que preocuparse por este negocio Browserify.

Aquí hay un ejemplo donde usamos la opción --s con un argumento de module:

browserify index.js --s module > dist/module.js

Esto expondrá nuestro módulo como una variable global llamada module.
Source .

Actualización: Gracias a @fotinakis. Asegúrate de pasar --standalone your-module-name. Si olvidas que --standalone toma un argumento, Browserify podría generar silenciosamente un módulo vacío ya que no pudo encontrarlo.

Espero que esto te ahorre algo de tiempo.

La respuesta de@Matas Vaitkevicius con la opción independiente de Browserify es correcta (la respuesta de@thejh usando la variable global de ventana también funciona, pero como otros han señalado, contamina el espacio de nombres global por lo que no es ideal). Quería añadir un poco más de detalle sobre cómo utilizar la opción independiente.

En el script fuente que desea agrupar, asegúrese de exponer las funciones que desea llamar a través del módulo.exportación. En el script de cliente, puede llamar a estos expuestos funciones a través de .. He aquí un ejemplo:

Mi archivo fuente src/script.js tendrá esto:
module.exports = {myFunc: func};

Mi comando browserify se verá algo como esto:
browserify src/script.js --standalone myBundle > dist/bundle.js

Y mi script de cliente dist/client.js cargará el script incluido
<script src="bundle.js"></script>
y luego llamar a la función expuesta como esta:
<script>myBundle.myFunc();</script>

No es necesario requerir el nombre del paquete en el script del cliente antes llamar a las funciones expuestas, p. ej. <script src="bundle.js"></script><script>var bundled = require("myBundle"); bundled.myFunc();</script> no es necesario y no funcionará.

De hecho, al igual que todas las funciones incluidas por browserify sin modo independiente, la función require no estará disponible fuera del script incluido. Browserify le permite usar algunas funciones de nodo del lado del cliente, pero solo en el propio script incluido; no está destinado a crear un módulo independiente que pueda importar y usar en cualquier lugar del lado del cliente, por lo que tenemos que ir a todos este problema adicional solo para llamar a una sola función fuera de su contexto incluido.

Debe decir README.md de browserify acerca de --standalone parámetro o google "browserify umd"

Acabo de leer las respuestas y parece que nadie mencionó el uso del alcance de la variable global? Que es útil si desea utilizar el mismo código en el nodo.js y en el navegador.

class Test
{
  constructor()
  {
  }
}
global.TestClass = Test;

Entonces puedes acceder a la clase de prueba en cualquier lugar.

<script src="bundle.js"></script>
<script>
var test = new TestClass(); // Enjoy!
</script>

Nota: La clase de prueba estará disponible en todas partes. Que es lo mismo que usar la variable window.

Además, puede crear un decorador que exponga una clase al ámbito global. Que es realmente agradable, pero hace que sea difícil rastrear dónde se define una variable.

Tienes algunas opciones:

1. Deje que plugin browserify-bridge exporte automáticamente los módulos a un módulo de entrada generado. Esto es útil para proyectos de SDK o situaciones en las que no tiene que mantenerse al día manualmente con lo que se exporta.

2. Siga un patrón de pseudo-espacio de nombres para la exposición roll-up:

Primero, organice su biblioteca de esta manera, aprovechando las búsquedas de índices en carpetas:

/src
--entry.js
--/helpers
--- index.js
--- someHelper.js
--/providers
--- index.js
--- someProvider.js
...

Con este patrón, se define la entrada así:

exports.Helpers = require('./helpers');
exports.Providers = require('./providers');
...

Observe que el require carga automáticamente el índice.js from each respective sub-folder

En sus subcarpetas, solo puede incluir un manifiesto similar de los módulos disponibles en ese contexto:

exports.SomeHelper = require('./someHelper');

Este patrón escala muy bien y permite el seguimiento contextual (carpeta por carpeta) de lo que se debe incluir en la api enrollada.

Para fines de depuración agregué esta línea a mi código.js:

window.e = function(data) {eval(data);};

Entonces podría ejecutar cualquier cosa incluso fuera del paquete.

e("anything();");

window.LogData =function(data){
   return unique(data);
};

Llame a la función simplemente por LogData(data)

Esto es solo una ligera modificación a la respuesta de thejh pero importante