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

Я новичок в nodejs и browserify. Я начал с этого ссылке .

у меня есть файл main.js, который содержит этот код

var unique = require('uniq');

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

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

теперь я устанавливаю модуль uniq с npm:

 npm install uniq

затем я связываю все необходимые модули, начиная с main.js в один файл под названием bundle.js с командой browserify:

browserify main.js -o bundle.js

созданный файл выглядит так:

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

после включения пучка.js файл в мой индекс.htm-страница, как вызвать функцию logData ??

8 63
node.js npm browserify

8 ответов:

по умолчанию browserify не позволяет вам получить доступ к модулям из-за пределов кода browserified – если вы хотите вызвать код в модуле browserified, вы должны browserify ваш код вместе с модулем. См.http://browserify.org/ для примеров этого.

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

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

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

60

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

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

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

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

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

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

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

76

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

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

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

мой browserify command будет выглядеть примерно так:
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 позволяет использовать некоторые функции узла на стороне клиента, но только в комплекте сам скрипт; он не предназначен для создания автономного модуля, который вы можете импортировать и использовать в любом месте на стороне клиента, поэтому мы должны пойти на все эти дополнительные проблемы, чтобы вызвать одну функцию вне ее связанного контекста.

15

читать README.md из browserify о или google "browserify umd"

7

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

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

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

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

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

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

4

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

  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');
...

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

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

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

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

1

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

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

тогда я мог бы работать даже за пределами пакета.

e("anything();");
-1
window.LogData =function(data){
   return unique(data);
};

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

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

-1