Browserify - Как вызвать функцию, связанную с файлом, созданным с помощью браузера в браузере

По умолчанию браузер не позволяет вам получить доступ к модулям из-за пределов браузерного кода — если вы хотите вызвать код в браузерном модуле, вы должны браузерировать свой код вместе с модулем. Примеры см. на странице http://browserify.org/.

Конечно, вы также можете явно сделать свой метод доступным извне, например:

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

Затем вы можете позвонить LogData() из любого места на странице.

Ключевой частью объединения автономных модулей с Browserify является параметр --s. Он предоставляет все, что вы экспортируете из своего модуля, используя узел module.exports в качестве глобальной переменной. Затем файл можно включить в тег <script>.

Вам нужно сделать это только в том случае, если по какой-то причине вам нужно, чтобы эта глобальная переменная была открыта. В моем случае клиенту требовался автономный модуль, который можно было бы включить в веб-страницы, не беспокоясь об этом бизнесе Browserify.

Вот пример, где мы используем опцию --s с аргументом module:

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

Это сделает наш модуль глобальной переменной с именем module.
Источник.

Обновление: спасибо @fotinakis. Убедитесь, что вы проезжаете --standalone your-module-name. Если вы забудете, что --standalone принимает аргумент, Browserify может молча сгенерировать пустой модуль, поскольку не может его найти.

Надеюсь, это сэкономит вам время.

Ответ @Matas Vaitkevicius с автономной опцией Browserify является правильным (@thejh ответ с использованием глобальной переменной окна также работает, но, как и другие отметил, что он загрязняет глобальное пространство имен, поэтому он не идеален). Я хотел добавить немного больше деталей о том, как использовать автономную опцию.

В исходном скрипте, который вы хотите связать, обязательно укажите функции, которые вы хотите вызывать, через module.exports. В клиентском скрипте вы можете вызывать эти открытые функции через ‹bundle-name›.‹func-name›. Вот пример:

В моем исходном файле src/script.js будет следующее:
module.exports = {myFunc: func};

Моя команда браузера будет выглядеть примерно так:
browserify src/script.js --standalone myBundle > dist/bundle.js

И мой клиентский скрипт dist/client.js загрузит связанный скрипт
<script src="bundle.js"></script>
, а затем вызовет открытую функцию следующим образом:
<script>myBundle.myFunc();</script>

Нет необходимости запрашивать имя пакета в клиентском сценарии перед вызовом открытых функций, например. <script src="bundle.js"></script><script>var bundled = require("myBundle"); bundled.myFunc();</script> не нужен и не будет работать.

На самом деле, как и все функции, связанные с browserify без автономного режима, функция require не будет доступна вне связанного скрипта. Browserify позволяет вам использовать некоторые функции Node на стороне клиента, но только в самом связанном скрипте; он не предназначен для создания автономного модуля, который вы можете импортировать и использовать где угодно на стороне клиента, поэтому нам приходится прибегать ко всем этим дополнительным проблемам, чтобы просто вызвать одну функцию вне ее связанного контекста.

Я только что прочитал ответы и, похоже, никто не упомянул об использовании глобальной переменной? Это полезно, если вы хотите использовать один и тот же код в node.js и в браузере.

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

Затем вы можете получить доступ к TestClass из любого места.

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

Примечание. После этого TestClass становится доступным везде. Это то же самое, что использовать переменную окна.

Кроме того, вы можете создать декоратор, который предоставляет классу глобальную область видимости. Это действительно хорошо, но затрудняет отслеживание определения переменной.

Прочтите README.md браузера о параметре --standalone или погуглите "browserify umd"

Минимальный запускаемый пример

Это в основном то же самое, что и: https://stackoverflow.com/a/43215928/895245, но с конкретными файлами, которые будут позволит вам просто запустить и легко воспроизвести его самостоятельно.

Этот код также доступен по адресу: 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>

Использование Node.js:

#!/usr/bin/env node

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

console.log(browserify_hello_world.myfunc());

Создайте out.js для использования в браузере:

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

И браузер, и командная строка показывают ожидаемый результат:

1 2 3

Протестировано с Browserify 16.5.0, Node.js v10.15.1, Chromium 78, Ubuntu 19.10.

Чтобы ваша функция была доступна как из HTML, так и из узла на стороне сервера:

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>

Выполнить:

npm install uniq
browserify main.js > bundle.js

и вы должны получить те же результаты при открытии main.html в браузере, что и при запуске

node main.js

это действительно просто - вся эта концепция заключается в упаковке

1. альтернатива - объект "это"

для этой цели я предполагаю, что у вас есть только 1 скрипт для всего приложения {{app_name}} и 1 функция {{function_name}}

добавьте функцию {{function_name}}, чтобы возразить против этого

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

тогда вам нужно назвать этот объект, чтобы он был доступен - вы сделаете это, добавив автономный параметр с именем, как советовали другие

поэтому, если вы используете watchify with browserify, используйте это

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

или командная строка

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

то вы можете вызвать свою функцию из браузера

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

2. альтернатива - объект "окно"

добавить функцию {{function_name}} в окно объекта

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

то вы можете вызвать свою функцию из браузера

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

--

может быть, я помогу кому-то

У вас есть несколько вариантов:

1. Пусть плагин browserify-bridge автоматически экспортирует модули в сгенерированный модуль ввода. Это полезно для проектов SDK или ситуаций, когда вам не нужно вручную следить за тем, что экспортируется.

2. Следуйте шаблону псевдопространства имен для свертывания:

Во-первых, упорядочите свою библиотеку следующим образом, воспользовавшись индексным поиском по папкам:

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

С помощью этого шаблона вы определяете запись следующим образом:

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

Обратите внимание, что требование автоматически загружает index.js из каждой соответствующей подпапки.

В своих подпапках вы можете просто включить аналогичный манифест доступных модулей в этом контексте:

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

Этот шаблон очень хорошо масштабируется и позволяет контекстуально (папка за папкой) отслеживать, что включать в свернутый API.

Вы также можете вызвать свою функцию из html-файла следующим образом:

main.js: (будет в bundle.js)

window.onload = function () {
    document.getElementById('build-file')
        .addEventListener('click', buildFile)

}
function buildFile() {
 ...
}

индекс.html:

<button id="build-file"">Build file</button>

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

Вызовите функцию просто LogData(data)

Это всего лишь небольшая модификация ответа thejh, но важная.

В целях отладки я добавил эту строку в свой code.js:

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

Тогда я мог запускать что угодно даже вне пакета.

e("anything();");