包含 bundle.js 脚本后，无法从 index.html 引用 Browserify 模块答案

【问题标题】：Browserify modules cannot be referenced from index.html after including bundle.js script包含 bundle.js 脚本后，无法从 index.html 引用 Browserify 模块
【发布时间】：2017-05-18 00:11:07
【问题描述】：

我正在使用 Browserify 从 index.html 文件（托管在 Google App Engine 上）访问 Node 模块

我在“main.js”文件中导入模块，我看到的是Browserify文档中的标准，如下：

var request = require('request');
var fs = require('fs');

然后我使用以下命令将其捆绑到一个 bundle.js 文件中：

browserify main.js -o bundle.js

这会成功生成所需的 bundle.js 文件。然后，我将其包含在 index.html 的标题顶部，如下所示：

<HEAD>
   <script src="/scripts/bundle.js"></script>

   <script src="/scripts/util/loader.js"></script>
   <!-- More scripts below here -->

index.html 正文中的脚本然后调用 loader.js 中使用该行的函数

request('api.my-url.com/world').pipe(fs.createWriteStream('/resources/myMap.json'));

我用它来尝试创建一个包含响应内容的文件。但是，当我在 GAE 上部署它并访问 index.html 时，我会看到错误消息：

loader.js:15 Uncaught ReferenceError: request is not defined
    at loadWorld (loader.js:15)
    at Object.create ((index):55)

如果我尝试将 request() 调用移到 index.html 中的脚本中，我会遇到同样的问题，但是如果我将行移到 main.js 中，我将不再遇到此问题。

我认为这归结为个人对 Javascript 的误解，但我似乎无法弄清楚为什么在 bundle.js 通过脚本标签包含在 index.html 之后，请求对象在 index.html 中不可用.

非常感谢任何可以了解情况的人，谢谢。

【问题讨论】：

通常，捆绑包将包含整个应用程序。您是否捆绑requrest 仅用于index.html 中的其他脚本？如果是这样的话，答案就很简单了。但是，您对fs 的无效使用使您的问题难以理解——因为它永远不会起作用。你能把你想要做的事情简化为一个简单的陈述吗？

标签： javascript html node.js browserify

【解决方案1】：

当您创建 browserify 包时，它旨在成为应用程序的“入口点”。但似乎您的入口点在 index.html 中，所以您想要捆绑一个独立的库。

Browserify 有一个名为 --standalone 的选项来执行此操作，它会生成一个 UMD 包：https://github.com/substack/browserify-handbook#standalone

您以几乎相同的方式调用它，但指定应该为 UMD 包指定的名称（在全局命名空间中）。例如。

browserify foo.js --standalone mylib > bundle.js

现在，当您在 html 中包含 <script src="bundle.js"></script> 时，后续脚本将能够引用 mylib 对象。

以下是使用--standalone 选项的示例：

另外，如果您想要像 request 这样可以在浏览器中使用的东西，https://www.npmjs.com/package/xhr 有一个非常相似的 API。

【讨论】：