浏览器shimming如何工作？ CommonJs和Non-CommonJs模块

Question

前提1 ：如果某个javascript可以通过npm获得，那么该片段是用CommonJs样式编写的，所以不需要填充它吗？ （这里我专注于客户端模块，如jquery，backbone，jquery插件等）

前提2 ：Browserify永远不会创建全局变量吗？

简单示例：

的index.html

<p>Click me</p>
<script src="bundle.js"></script>

entry_point.js

var test = require('./test');

test.js

var $      = require('jquery');
var test1 = require('./test1'); 

$('body').css({ 'background': '#c0c0c0' });

test1.js

var $ = require('jquery');

$('p').click(function() { alert("you clicked on paragraph"); });

所以运行browserify entry_point.js -o bundle.js一切都运行良好，没有任何东西被全局（窗口）对象所取代。 每个需要通过jquery做某事的模块需要首先包含jquery， 因为jquery不是全局的。要将其与包含jquery的标准方法进行比较：

<script src="jquery.min.js"></script>

现在让我说我需要包含一些不是用CommonJs风格编写的jquery-plugin，例如https://github.com/drewwilson/TipTip。

前提3 。为了使用一些没有用CommonJs风格编写的browserify库，我必须使用这个库吗？

经过大量的试验和错误，并在stackoverflow上阅读类似的问题，不知怎的，我管理它工作。我通过安装了browserify-shim。 npm install --save-dev browserify-shim我向package.json添加了一些样板文件以便工作。

重构使用填充的简单示例：

{
    "browserify": {
        "transform": [
            "browserify-shim"
        ]
    },
    "browser": {
        "jquery": "./jquery.min.js",
        "jquery-tipTip": "./jquery.tipTip.js"
    },
    "browserify-shim": {
        "jquery": {
            "exports": "$"
        },
        "jquery-tipTip": {
            "depends": [
                "jquery"
            ],
            "exports": "null"
        }
   }
}

的index.html

<p>Click me</p>
<script src="bundle.js"></script>

entry_point.js

var $      = require('jquery');
var tipTip = require('jquery-tipTip');
var test   = require('./test');

test.js

$('body').css({ 'background': '#c0c0c0' });

test1.js

$('p').click(function() { alert("you clicked on paragraph"); });
$('p').tipTip({ content: "bla bla" });

所以在填充之后（因为只有一个插件），browserify使一切都变得全局化，我不需要从每个模块需要jquery现在我只能在entry_point.js中要求它，我不喜欢。

通过这种方式我感觉我不会使用太多的浏览器。

这是不是用CommonJS风格写的东西的好方法吗？是否有一些方法可以编写第二个示例而不将任何内容附加到全局（默认情况下是browserify）

如果有可能我希望在填充之后保持相同的逻辑，那么如果任何模块需要jquery或jquery-plugin，那么模块需要同时需要它们。