从 browserify 文件共享代码

Question

我有一个 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 准备好，但我开始认为这不是问题。

Answer 1

您需要导出 public 函数。

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 选项：

When opts.standalone is a non-empty string, a standalone module is created with that name and a umd wrapper. You can use namespaces in the standalone global export using a . in the string name as a separator, for example 'A.B.C'. The global export will be sanitized and camel cased.

来自https://github.com/substack/node-browserify#usage

从 browserify 文件共享代码

sharing code from a browserify file

javascript

html

node.js

browserify