Browserify - como chamar a função agrupada em um arquivo gerado por meio do browserify no navegador

Eu sou novo em nodejs e browserify. Comecei com este link .

Eu tenho o arquivo main.js que contém 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));
};

Agora eu instalo o módulo uniq com npm:

 npm install uniq

Em seguida, agrupo todos os módulos necessários começando em main.js em um único arquivo chamado bundle.js com o comando browserify:

browserify main.js -o bundle.js

O arquivo gerado tem a seguinte aparência:

(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])

Depois de incluir o arquivo bundle.js na minha página index.htm, como faço para chamar a função logData ??

Por padrão, o browserify não permite que você acesse os módulos de fora do código browserified - se você deseja chamar o código em um módulo browserified, você deve browserify seu código junto com o módulo. Veja http://browserify.org/ para exemplos disso.

Claro, você também pode tornar seu método explicitamente acessível de fora desta forma:

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

Em seguida, você pode ligar LogData()de qualquer outro lugar na página.

A parte principal de agrupar módulos autônomos com o Browserify é a --sopção. Ele expõe tudo o que você exporta de seu módulo usando o nó module.exportscomo uma variável global. O arquivo pode então ser incluído em uma <script>tag.

Você só precisa fazer isso se, por algum motivo, precisar que essa variável global seja exposta. No meu caso, o cliente precisava de um módulo autônomo que pudesse ser incluído nas páginas da web sem que eles precisassem se preocupar com esse negócio do Browserify.

Aqui está um exemplo em que usamos a --sopção com um argumento de module:

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

Isso irá expor nosso módulo como uma variável global chamada module.
Fonte .

Atualização: Obrigado a @fotinakis. Certifique-se de que você está passando --standalone your-module-name. Se você esquecer que --standaloneleva um argumento, o Browserify pode gerar silenciosamente um módulo vazio, pois não foi possível encontrá-lo.

Espero que isso economize algum tempo.

A resposta de @Matas Vaitkevicius com a opção autônoma do Browserify está correta (a resposta de @ thejh usando a variável global de janela também funciona, mas como outros notaram, ela polui o namespace global, por isso não é ideal). Eu queria adicionar mais detalhes sobre como usar a opção autônoma.

No script de origem que você deseja agrupar, certifique-se de expor as funções que deseja chamar por meio de module.exports. No script do cliente, você pode chamar essas funções expostas por meio de <bundle-name>. <func-name> . Aqui está um exemplo:

Meu arquivo de origem src / script.js terá este:
module.exports = {myFunc: func};

Meu comando browserify será semelhante a este:
browserify src/script.js --standalone myBundle > dist/bundle.js

E meu script de cliente dist / client.js carregará o script agrupado
<script src="bundle.js"></script>
e chamará a função exposta desta forma:
<script>myBundle.myFunc();</script>

Não há necessidade de exigir o nome do pacote no script do cliente antes de chamar as funções expostas, por exemplo, <script src="bundle.js"></script><script>var bundled = require("myBundle"); bundled.myFunc();</script>não é necessário e não funcionará.

Na verdade, assim como todas as funções agrupadas por browserify sem modo autônomo, a função require não estará disponível fora do script agrupado . O Browserify permite que você use algumas funções do Node no lado do cliente, mas apenas no próprio script empacotado ; não foi criado para criar um módulo autônomo que você possa importar e usar em qualquer lugar do lado do cliente, e é por isso que temos que ter todo esse trabalho extra apenas para chamar uma única função fora de seu contexto agrupado.

Acabei de ler as respostas e parece que ninguém mencionou o uso do escopo da variável global? O que é útil se você deseja usar o mesmo código em node.js e no navegador.

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

Então você pode acessar o TestClass em qualquer lugar.

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

Nota: O TestClass torna-se então disponível em qualquer lugar. O que é o mesmo que usar a variável de janela.

Além disso, você pode criar um decorador que expõe uma classe ao escopo global. O que é muito bom, mas torna difícil rastrear onde uma variável é definida.

Leia README.md do browserify sobre o --standaloneparâmetro ou google "browserify umd"

Para ter sua função disponível tanto no HTML quanto no nó do servidor:

main.js:

var unique = require('uniq');

function myFunction() {
    var data = [1, 2, 2, 4, 3];
    return unique(data).toString();
}
console.log ( myFunction() );

// When browserified - we can't call myFunction() from the HTML, so we'll externalize myExtFunction()
// On the server-side "window" is undef. so we hide it.
if (typeof window !== 'undefined') {
    window.myExtFunction = function() {
        return myFunction();
    }
}

main.html:

<html>
    <head>
        <script type='text/javascript' src="bundle.js"></script>
    <head>
    <body>
        Result: <span id="demo"></span>
        <script>document.getElementById("demo").innerHTML = myExtFunction();</script>
    </body>
</html>

Corre:

npm install uniq
browserify main.js > bundle.js

e você deve obter os mesmos resultados ao abrir main.html em um navegador e ao executar

node main.js

Exemplo de execução mínima

É basicamente o mesmo que: https://stackoverflow.com/a/43215928/895245, mas com arquivos concretos que permitirão que você apenas execute e reproduza facilmente você mesmo.

Este código também está disponível em: https://github.com/cirosantilli/browserify-hello-world

index.js

const uniq = require('uniq');

function myfunc() {
  return uniq([1, 2, 2, 3]).join(' ');
}
exports.myfunc = myfunc;

index.html

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Browserify hello world</title>
</head>
<body>
<div id="container">
</body>
</div>
<script src="out.js"></script>
<script>
document.getElementById('container').innerHTML = browserify_hello_world.myfunc();
</script>
</html>

Uso de Node.js:

#!/usr/bin/env node

const browserify_hello_world = require('./index.js');

console.log(browserify_hello_world.myfunc());

Gere out.jspara uso do navegador:

npx browserify --outfile out.js --standalone browserify_hello_world index.js

Tanto o navegador quanto a linha de comando mostram a saída esperada:

1 2 3

Testado com Browserify 16.5.0, Node.js v10.15.1, Chromium 78, Ubuntu 19.10.

Você tem poucas opções:

1. Deixe o plugin browserify-bridge exportar automaticamente os módulos para um módulo de entrada gerado. Isso é útil para projetos de SDK ou situações em que você não precisa acompanhar manualmente o que é exportado.

2. Siga um padrão de pseudo-namespace para exposição de roll-up:

Primeiro, organize sua biblioteca assim, aproveitando as pesquisas de índice nas pastas:

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

Com este padrão, você define a entrada assim:

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

Observe que o require carrega automaticamente o index.js de cada subpasta respectiva

Em suas subpastas, você pode apenas incluir um manifesto semelhante dos módulos disponíveis nesse contexto:

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

Esse padrão é muito bem dimensionado e permite o rastreamento contextual (pasta por pasta) do que incluir na API acumulada.

é muito simples - todo esse conceito é sobre embrulhar

1. alternativa - objeto "este"

para este propósito, assumirei que você tem "apenas 1 script para todo o aplicativo {{app_name}}" e "1 função {{function_name}}"

adicione a função {{function_name}} ao objeto "este"

function {{function_name}}(param) {}
->
this.{{function_name}} = function(param) {}

então você tem que nomear aquele objeto para estar disponível - você irá fazê-lo adicionar o parâmetro "autônomo com nome" como outros aconselharam

então se você usar "watchify" com "browserify", use este

var b = browserify({
    ...
    standalone: '{{app_name}}'
});

ou linha de comando

browserify index.js --standalone {{app_name}} > index-bundle.js

então você pode chamar sua função do navegador

{{app_name}}.{{function_name}}(param);
window.{{app_name}}.{{function_name}}(param);

2. alternativa - objeto "janela"

adicione a função {{function_name}} ao objeto "janela"

function {{function_name}}(param) {}
->
window.{{function_name}} = function(param) {}

então você pode chamar sua função do navegador

{{function_name}}(param);
window.{{function_name}}(param);

-

talvez eu ajude alguém

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

Chame a função simplesmente por LogData(data)

Esta é apenas uma ligeira modificação na resposta do jh, mas importante

Para fins de depuração, adicionei esta linha ao meu code.js:

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

Então eu poderia executar qualquer coisa, mesmo fora do pacote.

e("anything();");