将 bootstrap.js 添加到 browserify？

Posted 2023-03-08

【中文标题】将 bootstrap.js 添加到 browserify？

【英文标题】：Adding bootstrap.js to browserify?

【发布时间】：2014-05-22 19:09:15

【问题描述】：

所以我想弄清楚如何做到这一点？我通过 bower 下载了 bootstrap-sass 并将 bootstrap javascript 添加到 shim 中。

有几件事让我很困惑，bootstrap.js 文件看起来像这样。

//= require bootstrap/affix
//= require bootstrap/alert
//= require bootstrap/button
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/tooltip
//= require bootstrap/popover

这是一种自我解释，但同时仍然令人困惑，我是否留下这样的评论？当我添加到 bootstrap shim 时，我是否只包含 bootstrap.js 文件，还是应该链接到我需要的所有文件？

为了避免自己被黑客入侵（我将在此期间这样做），我想尝试获取一些有关如何将 bootstrap.js 包含到 browserify 中的信息。

编辑：我想我可能只需要连接我需要的所有文件并包含该脚本，因为当我浏览 bootstrap.js 时，我只会得到上述内容。

我会尝试不使用 cmets，然后如果失败，我会将所有脚本合并到一个文件中，看看会发生什么:)

编辑： 嗯，看起来 concat 理论有效！唯一的就是jQuery，看看吧。

; jQuery = global.jQuery = require("c:\\wamp\\www\\mysite\\app\\client\\requires\\jquery\\js\\jquery.js");
/* ========================================================================
 * Bootstrap: affix.js v3.1.1
 * http://getbootstrap.com/javascript/#affix
 * ========================================================================
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */

这是我编译的 browserify 代码，当我调用引导函数例如 $('body').modal('toggle') 时让它工作的唯一方法我必须手动将上面的 jQuery 更改为 $。

我尝试在我的 shim 中同时使用两者，但我必须手动编写 $。示例

// Notice I use $ here not jQuery like above, this is the only way to get it to work!
; $ = global.jQuery = require("c:\\wamp\\www\\mysite\\app\\client\\requires\\jquery\\js\\jquery.js");
/* ========================================================================
 * Bootstrap: affix.js v3.1.1
 * http://getbootstrap.com/javascript/#affix
 * ========================================================================
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */

【参考方案1】：

此答案由原始提问者提供。它是作为问题的编辑发布的。我把它移到这里，答案在哪里。

我重新编译了，现在看起来可以工作了，请确保在你的 你使用的垫片$

"bootstrap": 
    "exports": "bootstrap",
    "depends": 
        "jquery": "$"
    
,

【讨论】：

是的，我明白了，browserify 真的很令人沮丧，但是当我有疑问时，我意识到只是摆弄 shim。

只是为了回答和给出正确的解决方案，即使我有它，也要标记它......

谢谢，你太慷慨了。

这必须添加到 package.json，而不是 bower.json.. 它可以工作，但你必须这样写：“browserify-shim”：“bootstrap”：“exports”： “引导”，“依赖”：[“jquery：$”]

我将“jquery:$”更改为“jquery:jQuery”，现在可以使用了。

【参考方案2】：

另一个解决方案是使用Webpack，它有一个脚本加载器来在全局上下文中加载jQuery。

【讨论】：

我正在这样使用它require("jquery"); require('jquery-ui'); require('bootstrap-sass'); 仍然消息是一样的。