node.js - que - browserify vs webpack

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

Question

Soy nuevo en nodejs y browserify. Empecé con este link .

Tengo el archivo main.js que contiene este código

var unique = require(''uniq'');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

this.LogData =function(){
console.log(unique(data));
};

Ahora instalo el módulo uniq con npm:

 npm install uniq

Luego agrupo todos los módulos requeridos comenzando en main.js en un solo archivo llamado bundle.js con el comando browserify:

browserify main.js -o bundle.js

El archivo generado se ve así:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module ''"+o+"''")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var unique = require(''uniq'');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

this.LogData =function(){
console.log(unique(data));
};

},{"uniq":2}],2:[function(require,module,exports){
"use strict"

function unique_pred(list, compare) {
  var ptr = 1
    , len = list.length
    , a=list[0], b=list[0]
  for(var i=1; i<len; ++i) {
    b = a
    a = list[i]
    if(compare(a, b)) {
      if(i === ptr) {
        ptr++
        continue
      }
      list[ptr++] = a
    }
  }
  list.length = ptr
  return list
}

function unique_eq(list) {
  var ptr = 1
    , len = list.length
    , a=list[0], b = list[0]
  for(var i=1; i<len; ++i, b=a) {
    b = a
    a = list[i]
    if(a !== b) {
      if(i === ptr) {
        ptr++
        continue
      }
      list[ptr++] = a
    }
  }
  list.length = ptr
  return list
}

function unique(list, compare, sorted) {
  if(list.length === 0) {
    return []
  }
  if(compare) {
    if(!sorted) {
      list.sort(compare)
    }
    return unique_pred(list, compare)
  }
  if(!sorted) {
    list.sort()
  }
  return unique_eq(list)
}

module.exports = unique
},{}]},{},[1])

Después de incluir el archivo bundle.js en mi página index.htm, ¿cómo puedo llamar a la función logData?

Answer 1

Acabo de leer las respuestas y parece que nadie mencionó el uso del alcance variable global. Lo cual es útil si quiere usar el mismo código en node.js y en el navegador.

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

Entonces puede acceder al TestClass en cualquier lugar.

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

Nota: El TestClass luego estará disponible en todas partes. Lo cual es lo mismo que usar la variable de ventana.

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

Answer 2

De forma predeterminada, browserify no le permite acceder a los módulos desde fuera del código browserified; si desea llamar al código en un módulo browserified, se supone que debe navegar por el código junto con el módulo. Vea link para ejemplos de eso.

Por supuesto, también podría hacer explícitamente que su método sea accesible desde afuera de esta manera:

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

Luego, puede llamar a LogData() desde cualquier otro lugar de la página.

Answer 3

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

En el script de origen que desea agrupar, asegúrese de exponer las funciones que desea llamar a través de module.exports. En el script del cliente, puede llamar a estas funciones expuestas a través de <nombre-paquete>. <Nombre-func> . Aquí hay 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 llama a la función expuesta de esta manera:
<script>myBundle.myFunc();</script>

No es necesario solicitar el nombre del paquete en el script del cliente antes de llamar a las funciones expuestas, por ejemplo, <script src="bundle.js"></script><script>var bundled = require("myBundle"); bundled.myFunc();</script> <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 agrupadas por browserify, la función requerida no estará disponible fuera del script incluido . Browserify le permite usar algunas funciones de nodo del lado del cliente, pero solo en el 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 hacer frente a todos estos problemas adicionales solo para llamar a una única función fuera de su contexto integrado.

Answer 4

La parte clave de agrupar módulos independientes con Browserify es la opción --s . Expone todo lo que exportas de tu módulo usando module.exports del nodo 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 quede expuesta. En mi caso, el cliente necesitaba un módulo independiente que pudiera incluirse en las páginas web sin necesidad de preocuparse por este negocio de 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 estar pasando --standalone your-module-name . Si olvida que --standalone toma un argumento, Browserify puede generar silenciosamente un módulo vacío ya que no pudo encontrarlo.

Espero que esto te ahorre algo de tiempo.

Answer 5

Lea README.md de browserify sobre --standalone parameter o google "browserify umd"

Answer 6

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

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

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

e("anything();");

Answer 7

Tienes pocas opciones:

1. Deje que el complemento 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 con lo que se exporta.

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

En primer lugar, organice su biblioteca de esta manera, aprovechando las búsquedas de índice en las carpetas:

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

Con este patrón, usted define una entrada como esta:

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

Observe que el requerimiento carga automáticamente el index.js de cada subcarpeta respectiva

En sus subcarpetas, puede simplemente 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 qué incluir en la API enrollada.

Answer 8

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

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

Esto es solo una pequeña modificación a respuesta pero importante