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

现在我用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不允许您从browserified代码之外访问模块 – 如果您想在browserified模块中调用代码，则应该与模块一起浏览您的代码。 参见http://browserify.org/的例子。;

当然，你也可以明确地让你的方法可以从外部访问，如下所示：

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

然后你可以在页面的任何地方调用LogData() 。

Answer 2

使用Browserify捆绑独立模块的关键部分是--s选项。 它将使用节点的module.exports作为全局variables从模块中导出。 该文件可以包含在<script>标签中。

你只需要这样做，如果由于某种原因，你需要暴露全局variables。 在我的情况下，客户需要一个可以包含在网页中的独立模块，而不需要担心这个Browserify业务。

下面是一个例子，我们使用带有module参数的--s选项：

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

这将把我们的模块作为一个全局variables命名为module 。
来源 。

更新：感谢@fotinakis。 确保你传递 – --standalone your-module-name 。 如果您忘记了--standalone接受了一个参数，Browserify可能会默默地生成一个空模块，因为它找不到它。

希望这可以为你节省一些时间。

Answer 3

阅读关于--standalone参数或google“ --standalone umd”的--standalone

Answer 4

@Matas Vaitkevicius对Browserify的独立选项的回答是正确的（@thejh 使用窗口全局variables的答案也有效，但正如其他人已经注意到的那样，它会污染全局名称空间，所以它不是理想的）。 我想添加一些关于如何使用独立选项的更多细节。

在你想绑定的源脚本中，确保公开你想通过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> <script src="bundle.js"></script><script>var bundled = require("myBundle"); bundled.myFunc();</script>是没有必要的，将无法正常工作。

事实上，就像browserify捆绑的所有函数一样， require函数在捆绑脚本之外是不可用的 。 Browserify允许您使用一些Node函数客户端，但只能在捆绑脚本本身 ; 这并不意味着要创build一个独立的模块，你可以在任何地方导入和使用客户端，这就是为什么我们不得不去处理所有这些额外的麻烦，只是在绑定的上下文之外调用一个函数。

Answer 5

你有几个select：

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会自动从每个子文件夹中加载index.js

在您的子文件夹中，您可以在该上下文中包含可用模块的类似清单：

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

这种模式可以很好地缩放，并且允许上下文（逐个文件夹）跟踪在卷起的api中包含的内容。

Answer 6

我只是通读答案，似乎没有人提到使用全局variables作用域？

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

然后你可以在任何地方访问TestClass 。

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

注意： TestClass随处可见。 这与使用窗口variables相同。

另外，您可以创build一个将类暴露给全局范围的装饰器。 这真的很好，但很难跟踪variables的定义。

Answer 7

为了debugging的目的，我将这行添加到了我的code.js中：

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

然后，我甚至可以在捆绑之外运行任何东西。

 e("anything();");