从 browserify 文件共享代码答案

【问题标题】：sharing code from a browserify file从 browserify 文件共享代码
【发布时间】：2016-03-05 23:17:51
【问题描述】：

我有一个 JavaScript 库，它使用 Browserify 来保持代码模块化。

库本身使用基本的 Browserify 功能来要求其他 JS 文件。

myLibrary.js

var utils = require('helpers/utils.js')
console.log("Hello, I am logging from myLibrary")
function my_api(){
  utils.someFn()
}

我正在使用 Gulp 浏览 myLibrary.js，它正在正确构建，我已将多个日志放入 myLibrary.js，当我将文件加载到示例 html 文件中时，我可以看到日志。

我有一个使用 myLibrary.js 的示例 index.html 文件，我希望可以从 index.html 访问 my_api。

index.html

<script src="my_url/myLibrary.js"></script>
<script src="app.js"></script>

app.js

my_api()

Chrome 控制台

Hello I am logging from myLibrary (myLibrary.js)
Uncaught ReferenceError: my_api is not defined (app.js)

我尝试将 app.js 的加载推迟到 myLibrary.js 准备就绪，但我开始认为这不是问题。

【问题讨论】：

您的 browserify 输出可能封装了您的所有代码。不是超级精通 Browserify，但尝试返回 my_api 或 module.exports = my_api

【解决方案1】：

您需要导出您的公共函数。

module.exports = {my_api: my_api};

【讨论】：

我希望能够通过 html 文件
我不明白你在问什么。正如您所拥有的那样，该文件不会在模块范围之外公开my_api。
我希望 myLibrary 公开 my_api，以便我可以使用脚本标签将 myLibrary.js 加载到任何 html 文件中并调用 my_api。我想使用 Browserify 以便我可以将 myLibrary 分解为多个 js 文件。我要问的是是否可以将使用 Browserify (myLibrary.js) 构建的文件中的函数公开给不使用 Browserify (index.html/app.js) 的项目作为示例：如果你是在你的项目中使用 myLibrary.js 那么我宁愿你使用脚本标签加载它而不是强迫你使用 Browserify 来要求它。
您正在尝试使用以 commonJS 格式编写的 JS 文件。您只能在使用 Browserify 之类的浏览器中使用它。 @Ephapox。
我不同意你关于消费者不应该使用 Browserify 的建议。你绝对不应该不用你的函数污染全局命名空间！

【解决方案2】：

我最终使用的解决方案是公开一个全局对象，其中包含我想使用 window 对象通过 myLibrary 公开的所有方法。

myLibrary.js 需要一个实用函数文件，并将它们用作我想要公开的方法中的助手。

myLibrary.js

var util = require("utils.js")
window.myGlobalObjWithAUniqueName = {
  myFn: function(){
    util.someHelper()
  }
}

然后我使用 Browserify 创建新的 browserified_myLibrary.js 并在我想要加载它的任何文件中使用它的方法。

index.html

<script src="browserified_myLibrary.js"></script>
<script src="app.js"></script>

app.js

myGlobalObjWithAUniqueName.myFn()

不确定这是否是最好的方法，但这似乎适合我模块化客户端库并使用它而不必每次使用 Browserify 的需要。

【讨论】：

【解决方案3】：

您可能还想查看 browserify 公开的 --standalone 选项：

当 opts.standalone 是一个非空字符串时，将使用该名称和一个 umd 包装器创建一个独立模块。您可以使用 .在字符串名称中作为分隔符，例如 'A.B.C'。全球出口将经过消毒和骆驼装箱。

【讨论】：