Browserify - 如何调用浏览器中通过browserify生成的文件中捆绑的功能

Question

我是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));
};

现在我用npm安装uniq模块:

 npm install uniq

然后我使用browserify命令将从main.js开始的所有必需模块捆绑到一个名为bundle.js的文件中:

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

将bundle.js文件包含到我的index.htm页面后,如何调用logData函数？

Answer 1

使用Browserify捆绑独立模块的关键部分是--s选项.它使用节点module.exports作为全局变量公开从模块导出的任何内容.然后该文件可以包含在<script>标签中.

如果由于某种原因需要公开全局变量,则只需执行此操作.在我的情况下,客户端需要一个可以包含在网页中的独立模块,而无需担心这个Browserify业务.

这是我们使用--s带有以下参数的选项的示例module:

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

这会将我们的模块公开为名为的全局变量module.
来源.

更新: 感谢@fotinakis.确保你过世了--standalone your-module-name.如果您忘记--standalone了参数,Browserify可能会静默生成一个空模块,因为它无法找到它.

希望这能为您节省一些时间.

Answer 2

默认情况下,browserify不允许您从浏览器化代码外部访问模块 - 如果您想在浏览器模块中调用代码,则应该将代码与模块一起浏览.有关这方面的示例,请参见http://browserify.org/.

当然,您还可以明确地从外部访问您的方法,如下所示:

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

然后你可以LogData()从页面上的任何其他地方打电话.

Answer 3

@Matas Vaitkevicius对Browserify的独立选项的回答是正确的(@ thejh 使用窗口全局变量的答案也有效,但正如其他人所说,它会污染全局命名空间,因此它并不理想).我想添加一些关于如何使用独立选项的更多细节.

在要捆绑的源脚本中,确保通过module.exports公开要调用的函数.在客户端脚本中,您可以通过<bundle-name>.<func-name>调用这些公开的函数.这是一个例子:

我的源文件src/script.js将包含:
module.exports = {myFunc: func};

我的browserify命令看起来像这样:
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函数,但仅限于捆绑脚本本身 ; 它并不意味着创建一个独立的模块,您可以在客户端的任何地方导入和使用,这就是为什么我们必须在捆绑的上下文之外调用单个函数来解决所有这些额外的麻烦.

Answer 4

阅读browserify的README.md关于--standalone参数或google"browserify umd"

Answer 5

我只是阅读了答案,似乎没有人提到使用全局变量范围？如果您想在node.js和浏览器中使用相同的代码,这将非常有用.

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

然后您可以在任何地方访问TestClass.

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

注意: TestClass随后随处可用.这与使用window变量相同.

此外,您可以创建一个将类公开给全局范围的装饰器.哪个非常好,但很难跟踪变量的定义位置.

Answer 6

最小可运行示例

这基本上与： /sf/answers/3025114991/相同，但具有具体文件，可让您自己运行并轻松重现它。

此代码也可从以下位置获取：https ://github.com/cirosantilli/browserify-hello-world

索引.js

const uniq = require('uniq');

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

索引.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 进行测试。