如何调用浏览器中通过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])

在我的index.htm页面中包含bundle.js文件后，如何调用logData函数？

---

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

当然，你也可以明确地让你的方法可以像这样从外部访问：

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

然后，您可以从页面上的任何其他位置调用LogData() 。

---

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

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

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

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

这会将我们的模块公开为全局变量module 。
资源。

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

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

---

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

链接地址: http://www.djcxy.com/p/32937.html

上一篇: How to call function bundled in a file generated through browserify in browser

下一篇: Using babel.js instead of browserify to compile to bundle