别名和varName = require之间的browserify-shim差异("模块")

时间:2016-02-02 05:18:25

标签: javascript jquery twitter-bootstrap browserify browserify-shim

我使用browersify-shim将jquery,bootstrap和我的自定义js文件捆绑到一个最终包中。

我的自定义js文件不依赖于jQuery,但bootstrap确实存在。

我有以下package.json

"browser" : {
    "jquery": "path/to/jquery",
    "bootstrap": "path/to/bootstrap"
},
"browserify": {
    "transform": [ "browserify-shim" ]
},
"browserify-shim": {
    "jquery": "$",
    "bootstrap": {"depends" : "jquery:jQuery"}
},

现在在我的脚本文件中,我必须执行以下操作:

require('jquery');
require('bootstrap');

为" jquery"添加别名之间是否有区别?在package.json,与执行var window.$ = require('jquery');

在某些地方,我发现人们正在做上述两种情况,不应该只有一种吗?

其次,为什么我需要明确require jQuerybootstrap,即使我的自定义js文件都不依赖它。有没有办法告诉browserify-shim只是捆绑package.json中的所有内容,我告诉所有依赖项和别名。为什么要重复我的脚本文件中的每个模块。

1 个答案:

答案 0 :(得分:1)

第一个问题:

  

在package.json中为“jquery”添加别名与执行var窗口之间是否有区别。$ = require('jquery');

人们这样做的原因是他们需要jQuery在外面他们的bundle.js。例如,您的index.html中可能直接有$(document).ready()处理程序,在这种情况下,您需要在window对象上提供jQuery。如果您没有bundle.js之外的任何jQuery代码,那么这不是必需的,您可以在var $ = require('jquery');中根据需要使用bundle.js

你的第二个问题让我觉得上述情况可能就是这样。答案是你绝对可以在bundle.js之外加载Bootstrap和jQuery。

这里一个很好的解决方案是通过<script></script>标记,以通常的方式将它们添加到您的捆绑包之外。然后,如果你在捆绑包中需要它们,你可以require them as a global,这样如果你在bundle.js中引用它们,它们就不会被加载两次。