browserify后无法在浏览器中调用函数：Uncaught ReferenceError答案

【问题标题】：Function cannot be called in browser after browserify: Uncaught ReferenceErrorbrowserify后无法在浏览器中调用函数：Uncaught ReferenceError
【发布时间】：2017-11-28 22:17:47
【问题描述】：

我正在开发一个小型 NPM 包。这是一个基本原型：

function foo() {
  return 'foo';
}

module.exports = foo;

这个模块也可以在浏览器中使用。所以我安装了browserify 并运行了这个命令：

browserify foo.js -o foo_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);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.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){
function foo() {
  return 'foo';
}

module.exports = foo;
},{}]},{},[1]);

还有一个示例 HTML 文档：

<html>
  <head>
    <script src="foo_bundle.js"></script>
  </head>
  <body>
    <div id="myElement"></div>
    <script type="text/javascript">
      var element = document.getElementById("myElement");
      element.innerHTML = foo();
    </script>    
  </body>
</html>

我本来希望字符串 foo 被写入 div 元素，但浏览器的 JavaScript 控制台会打印：

foo.html:9 Uncaught ReferenceError: foo is not defined

我在这里错过了什么？

【问题讨论】：

this 可能会有所帮助
foo 函数不在全局范围内。 window.foo = foo;

标签： javascript node.js npm browserify

【解决方案1】：

您需要将其捆绑为独立版本 (UMD) 以在浏览器中使用：

browserify foo.js -o foo_bundle.js -s foo

更多用法here

【讨论】：