twitter-bootstrap - 使用 browserify 加载 twitter Bootstrap

Question

如何在 browserify 中使用 Twitter Bootstrap ？
我安装了 bootstrap-browserify，并尝试在我的代码中使用它

稍后在我的代码中，我有一些代码试图修补 Bootstrap 的模式对话框功能，但它会引发错误。

这就是我的代码的样子:

var bootstrap = require('bootstrap-browserify');

$(document).ready(function () {

    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        var that = this;
        $(document).on('focusin.modal', function (e) {
            if ($(e.target).hasClass('select2-input')) {
                return true;
            }

            if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
                that.$element.focus();
            }
        });
    };
}

我对 browserify 完全陌生，而且我是第一次使用它。我究竟做错了什么？

Answer 1

首先，您必须安装 Bootstrap、jQuery 和 browserify-shim。 .我更喜欢用 Bower 安装这些(因为扁平的依赖结构)，但你也可以使用 NPM。这是我的 package.json 的 browserify-shim 部分配置:

  "browserify": {
    "transform": [
      "browserify-shim"
    ]   
  },  
  "browser": {
    "jquery": "./bower_components/jquery/dist/jquery.min.js",
    "bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.min.js"
  },  
  "browserify-shim": {
    "jquery": "$",
    "bootstrap": {
      "depends": [
        "jquery: jQuery"
      ]   
    }   
  },  

我更喜欢安装 Bootstrap(及其依赖项 jQuery)的方式是将它们安装到全局范围。因此，在我的代码中将被“浏览”的某处，我将输入以下内容:

$ = jQuery = require('jquery');
require('bootstrap');

请注意，我没有使用 var这里。这意味着 $ , jQuery ，并且必要的 Bootstrap javascript 将在 window 上可用。目的。