Browserify：如果需要，使用 module.exports，否则暴露全局答案

【问题标题】：Browserify: Use module.exports if required, otherwise expose globalBrowserify：如果需要，使用 module.exports，否则暴露全局
【发布时间】：2013-04-16 19:49:46
【问题描述】：

我正在考虑在我的一些项目中采用browserify，但想确保其他人在使用（捆绑的）代码时不必使用browserify。显而易见的方法是通过module.exports 和window. 全局公开模块导出。但是，我宁愿不要污染那些require正在编写脚本的人的全局命名空间。

是否可以检测脚本是否为required？如果是，那么我可以这样做：

var mymodule = (function() { ... })();
if (isRequired()) {
  module.exports = mymodule;
} else {
  window.mymodule = mymodule;
}

请注意，无论如何，这将预先捆绑，因此var mymodule 不会暴露全局。另外，目前我正在使用revealing module pattern，但愿意切换到更适合browserify的东西。

制作requireable 和<script src=able 模块的最佳方法是什么？最好在两种情况下都公开一个全局变量吗？

【问题讨论】：

标签： javascript browserify

【解决方案1】：

福布斯林德赛有一篇很好的文章解释了如何进行独立构建： http://www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds

短版，使用独立选项：

browserify beep.js --standalone beep-boop > bundle.js

【讨论】：

链接使用已弃用的代码。不能再将选项传递给 bundle()。链接也没有解释它从哪里得到哔哔声，这个名字是否重要，以及在现实世界中用什么代替它。
我不确定术语是否正确，但本示例中的“beep-boop”是您希望在其中包含独立函数的“命名空间”。因此，如果我用browserify infile --standalone myspace -o outfile 浏览函数byteLength (...){...}，我将通过在包含outfile 的JS 文件中通过require() 调用myspace.byteLength(...) 来访问该函数。
澄清一下；将 browserify 版本 17.0.0 与上述一起使用为我提供了工作包并正确公开了一个驼峰式全局“beepBoop”。

【解决方案2】：

我正在处理构建库的相同问题，这是一个粗略的意见。我认为我们需要首先将图书馆的受众分为几类：

那些使用 browserify 和 NPM 的人
那些只会下载 mylib.min.js 并使用一种或另一种方式的人
AMD（带凉亭？），可能是第三类。

所以，对于 1 来说很简单，您将拥有一个 index.js 模块：

module.exports = function () { /* code */ }

你的 package.json 会有一个 main

“main”：“index.js”

请注意，我没有向 index.js 添加任何 window.xx 代码。

对于2，我认为最好的办法是创建一个standalone.js

var mylib = require('./index.js');
global.window.mylib = mylib;

这就是 browserify 应该构建的。

对于 3（如果您关心的话），您可以按如下方式调整standalone.js：

var mylib = require('./index.js');
if (typeof global.window.define == 'function' && global.window.define.amd) {
  global.window.define('mylib', function () { return mylib; });
} else {
  global.window.mylib = mylib;
}

【讨论】：

“全局”和“窗口”不一样吗？如果是这样，不应该是“global.mylib = mylib”而不是“global.window.mylib = ...”吗？

【解决方案3】：

假设另一个库没有创建全局 module.exports 对象，您可以简单地检查 module.exports 的存在

var mymodule = (function() { ... })();
if (module && module.exports) {
  module.exports = mymodule;
} else {
  window.mymodule = mymodule;
}

【讨论】：

Browserify 使 module、module.exports 和 require 可用于所有捆绑文件。所以，只是我的捆绑使那些可用。感谢您的回复。

【解决方案4】：

为什么不直接用闭包包裹整个东西并传递exports 作为参数？

(function (exports) {
    // code here
    // ...
    exports.foo = bar;
})(exports || this);

这样它也会将其导出到 WebWorker 范围和其他“无窗口”环境。

【讨论】：