Question

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

库本身使用基本的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准备就绪，但我开始认为这不是问题。

Answer 1

您需要导出公共功能。

module.exports = {my_api: my_api};

Answer 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。

Answer 3

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

当opts.standalone是非空字符串时，将使用该名称和umd包装器创建独立模块。您可以使用a在独立全局导出中使用名称空间。在字符串名称中作为分隔符，例如＆＃39; A.B.C＆＃39;。全球出口将进行消毒和骆驼封装。