Question

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

是否可以检测脚本是否为require d？如果是，那么我可以做类似的事情：

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

请注意，无论如何，这都会事先捆绑在一起，因此var mymodule不会暴露全局。此外，目前我正在使用revealing module pattern，但愿意切换到更适合浏览器化的内容。

使require能够和<script src=能够使用模块的最佳方法是什么？在这两种情况下暴露全局是否最好？

Answer 1

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

简短版本，使用独立选项：

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

Answer 2

我正在处理构建图书馆的同样问题，这是一个有争议的意见。我认为我们需要先为几个类别的库分离受众：

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

所以，对于 1 ，很容易，你将拥有一个index.js模块：

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

并且你的package.json将有一个主

“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;
}

Answer 3

假设另一个库尚未创建全局module.exports对象，您只需检查module.exports是否存在

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

Answer 4

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

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

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

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

4 个答案: