javascript Browserify:如果需要,使用 module.exports,否则公开全局

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16172035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 03:33:59  来源:igfitidea点击:

Browserify: Use module.exports if required, otherwise expose global

javascriptbrowserify

提问by Bryan Head

I'm considering adopting browserifyfor some of my projects, but would like to make sure that others don't have to use browserify if they want to use the (bundled) code. The obvious way to do this is to both expose the modules exports through module.exportsas well as through a window.global. However, I'd rather not pollute the global namespace for those who are requireing the script.

我正在考虑为我的一些项目采用browserify,但我想确保其他人如果想使用(捆绑的)代码就不必使用 browserify。这样做的显而易见的方法是通过module.exports以及通过window.全局公开模块导出。但是,我宁愿不为那些正在require编写脚本的人污染全局命名空间。

Is it possible to detect if a script is being required? If it is, then I could do something like:

是否可以检测脚本是否正在运行require?如果是,那么我可以执行以下操作:

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

Note that no matter what, this will be bundled beforehand, so the var mymodulewon't be exposing a global. Also, currently I'm using the revealing module pattern, but would be willing to switch to something more appropriate for browserify.

请注意,无论如何,这将被预先捆绑,因此var mymodule不会暴露全局。此外,目前我正在使用揭示模块模式,但愿意切换到更适合浏览器的东西。

What's the best way to make a module both requireable and <script src=able? Is it best to just expose a global in both circumstances?

使模块既可行require<script src=可行的最佳方法是什么?在这两种情况下最好只公开一个全局变量吗?

回答by karellm

There is a good article from Forbes Lindesay explaining how to do standalone builds: http://www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds

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

The short version, use the standalone option:

简短版本,使用独立选项:

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

回答by José F. Romaniello

I'm dealing with the same problem building a library and here is a rought opinion. I think we need to separate first the audiencesfor a library in few categories:

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

  1. those who use browserify and NPM
  2. those who will just download a mylib.min.js and use one way or another
  3. AMD (with bower?), might be the third category.
  1. 那些使用 browserify 和NPM 的人
  2. 那些只会下载 mylib.min.js 并使用一种或另一种方式的人
  3. AMD(带凉亭?),可能是第三类。

So, for 1it is easy, you will have a your index.js module:

因此,对于1,这很容易,您将拥有一个 index.js 模块:

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

and your package.json will have a main

你的 package.json 将有一个主要的

"main": "index.js"

"main": "index.js"

Notice I haven't add any window.xx code to index.js.

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

For 2I think the best idea is to create a standalone.js

对于2我认为最好的主意是创建一个standalone.js

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

This is what browserify should build.

这是 browserify 应该构建的。

For 3(if you care about) you can tweak standalone.js as follows:

对于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;
}

回答by RomainMF

Assuming another library hasn't created a global module.exports object, you can simply check for the existence of module.exports

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

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

回答by YemSalat

Why not just wrap the entire thing with a closure and pass exportsas a parameter?

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

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

This way it will also export it to WebWorker scope and other 'windowless' environments.

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